建議學(xué)習(xí)時(shí)長(zhǎng)： 45分鐘
學(xué)習(xí)方式：深入
學(xué)習(xí)目標(biāo)
- 了解常見(jiàn)的布局技巧。
詳細(xì)介紹
元素的居中主要分為水平居中和垂直居中竖独。
水平居中
元素內(nèi)的行內(nèi)元素
在元素上加
text-align:center;
寬度固定的塊級(jí)元素
在元素上加
width: 寬度值;
margin-left: auto;
margin-right: auto;
或者用絕對(duì)定位
position: absolute;
width: 寬度值;
left: 50%;
margin-left: -(寬度值/2);
寬度不固定的塊級(jí)元素
方法1
用display:inline-block负蠕。通過(guò)以下幾個(gè)步驟
- 元素設(shè)置
text-align:center; - 元素設(shè)置
font-size:0;。這樣做是為了去除子元素間的空格的占位 - 子元素設(shè)置
display:inline-block;
方法2
需要通過(guò)以下幾個(gè)步驟
- 讓元素的寬度變?yōu)樗氐膬?nèi)容盛卡⌒轮ⅲ可以用浮動(dòng)或絕對(duì)定位。
- 元素向左移動(dòng)其父級(jí)元素寬度的50%
- 子元素向左移動(dòng)其父級(jí)元素寬度的50%
例如虐块，有如下的HTML結(jié)構(gòu)
<ul id="no-sure-width-2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
樣式為
#no-sure-width-2 {
list-style: none;
position: absolute;
left: 50%;
/* 用下面的兩個(gè)樣式 和使用 position: absolute;是等效的俩滥。本質(zhì)上都是讓元素的寬度變?yōu)樗氐膶挾?*/
/*float:left;
position: relative;*/
}
#no-sure-width-2>li {
float: left;
position: relative;
left: -50%;
/*right: 50%;*/ /*left -50%和right 50% 是等價(jià)的*/
/*將每個(gè)分頁(yè)項(xiàng)向左移動(dòng)父元素寬度的50%*/
background-color: #ddd;
color: #fff;
width: 20px;
height: 24px;
line-height: 24px;
text-align: center;
}
水平居中總結(jié)
上面介紹的方法都是瀏覽器兼容性比較好的。兼容IE8+贺奠，Chrome霜旧，F(xiàn)irefox等。
還可以使用CSS3的flexbox敞嗡，transform等方式來(lái)實(shí)現(xiàn)水平居中颁糟。但使用這些CSS3特性來(lái)做居中時(shí)，要注意下兼容性喉悴。
詳細(xì)描述和更多實(shí)現(xiàn)見(jiàn)六種實(shí)現(xiàn)元素水平居中
垂直居中
單行文本的垂直居中
只需讓元素的行高的值設(shè)置成和高度的值一樣即可棱貌。如
height: 30px;
line-height: 30px;
高度不固定的元素的垂直居中
使用 Flex
父元素加
display: flex;
align-items: center;
然后就搞定了，很簡(jiǎn)單吧箕肃。
使用 table 布局
父元素加
display: table; /*讓元素以表格形式渲染*/
height: 200px; /* 需要定寬婚脱，定高 */
width: 100px;
子元素加
display: table-cell;/*讓元素以表格的單元素格形式渲染*/
vertical-align: middle;
用絕對(duì)定位
父元素使用定位
position: relative; // absolute，fixed 也可以勺像。只要不是 static障贸。
子元素
position: absolute;
top: 50%;
transform: translateY(-50%);
