在介紹居中方式之前，簡單介紹一下行內(nèi)元素和塊級元素。
行內(nèi)元素
- 和其他元素都在同一行
- 高，行高及外邊距和內(nèi)邊距部分可以改變
- 寬度只與內(nèi)容有關(guān)
- 行內(nèi)元素只能容納文本或者其他行內(nèi)元素
- 常用內(nèi)聯(lián)元素：
a,img,input,lable,select,span,textarea,font
塊級元素
- 總是在新行上開始，占據(jù)一整行
- 高度，行高以及外邊距和內(nèi)邊距都可控制
- 寬度始終與瀏覽器的寬度一樣，與內(nèi)容無關(guān)
- 可以容納行內(nèi)元素和其他塊級元素
- 常用的塊級元素：
div,p,table,form,h1,h2,h3,h4,h5,h6,dl,ol,ul,li
居中方式分為三種：水平居中，垂直居中，水平垂直居中。
1、水平居中
1.1、行內(nèi)元素水平居中
利用text-align: center可以實現(xiàn)在塊級元素內(nèi)部的行內(nèi)元素水平居中。
此方法對行內(nèi)元素(inline)，行內(nèi)塊(inline-block)，行內(nèi)表(inline-table)，inline-flex元素水平居中都有效。
<div class="center-text">
簡單是穩(wěn)定的前提。
</div>
div {
height:60px;
border: 2px dashed #f69c55;
}
.center-text {
text-align: center;
}
行內(nèi)水平居中
1.2、塊級元素水平居中
通過把固定寬度的塊級元素的margin-left和margin-right設(shè)成auto，就可以使塊級元素水平居中。
<div>
<p class="center-block">
簡單不先于復(fù)雜，而是在復(fù)雜之后。
</p>
</div>
div {
height:100px;
border: 2px dashed #f69c55;
}
.center-block {
margin: 0 auto;
width: 8rem;
padding:1rem;
color:#fff;
background:#000;
}
塊級元素水平居中
1.3、多塊級元素水平居中
利用inline-block
如果一行中有兩個或兩個以上的塊級元素，通過設(shè)置塊級元素的顯示類型為inline-block和父容器的text-align屬性從而使多塊級元素水平居中。
<div class="container">
<div class="inline-block">
簡單不先于復(fù)雜
</div>
<div class="inline-block">
而是在復(fù)雜之后
</div>
<div class="inline-block">
簡單不先于復(fù)雜，而是在復(fù)雜之后。
</div>
</div>
.container {
height:100px;
padding: 8px;
text-align: center;
border: 2px dashed #f69c55;
}
.inline-block {
padding: 8px;
width: 4rem;
margin: 0 8px;
color: #fff;
background: #000;
display: inline-block;
}
.container >div:first-child {
height: 45px;
}
.container >div:nth-of-type(2) {
height: 45px;
}
多塊級元素水平居中
利用displa: flex
利用彈性布局(flex)，實現(xiàn)水平居中，其中justify-content用于設(shè)置彈性盒子元素在主軸(橫向)方向上的對齊方式。
<div class="flex-center">
<div>
簡單不先于復(fù)雜。
</div>
<div>
簡單不先于復(fù)雜，而是在復(fù)雜之后。
</div>
<div>
而是在復(fù)雜之后。
</div>
</div>
.flex-center {
padding: 8px;
display: flex;
justify-content: center;
align-items:flex-end;
border: 2px dashed #f69c55;
}
.flex-center >div {
padding: 8px;
width: 4rem;
margin: 0 8px;
color: #fff;
background: #000;
}
.flex-center >div:first-child {
height: 45px;
}
.flex-center >div:last-child {
height: 45px;
}
彈性布局水平居中
-
flex-direction決定主軸的方向(即項目的排列方向) -
flex-wrap如果一條軸線排列不下，如何換行 -
justify-content定義了項目在主軸上的對齊方式 -
align-items定義項目在交叉軸上如何對齊
Flex布局教程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
2、垂直居中
2.1、單行行內(nèi)元素垂直居中
通過設(shè)置內(nèi)聯(lián)元素的高度(height)和行高(line-height)相等，從而使元素垂直居中。
<div id="box">
軟件在能夠復(fù)用前必須先能用。
</div>
#box {
height: 120px;
line-height: 120px;
border: 2px dashed #f69c55;
}
單行行內(nèi)元素垂直居中
2.2、多行元素垂直居中
利用表格布局
利用表布局的vertical-align: middle可以實現(xiàn)子元素的垂直居中 。
<div class="center-table">
<p class="v-cell">
The more technology you learn,<br>
the more you realize how little you know.
</p>
</div>
.center-table {
display: table;
height: 140px;
border: 2px dashed #f69c55;
}
.v-cell {
display: table-cell;
vertical-align: middle;
}
多行元素垂直居中
利用flex布局
利用flex布局實現(xiàn)垂直居中，其中flex-direction: column定義主軸方向為縱向。flex是在CSS3中定義，在較老的瀏覽器中存在兼容問題。
<div class="center-flex">
<p>
Dance like nobody is watching,<br>
code like everybody is.
</p>
</div>
.center-flex {
height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
border: 2px dashed #f69c55;
}
flex布局多行垂直居中
2.3、塊級元素垂直居中
固定高度的塊級元素
已知居中元素的高度和寬度，垂直居中問題就很簡單。通過絕對定位元素距離頂部50%，并設(shè)置margin-top向上偏移元素高度的一半，就可實現(xiàn)垂直居中。
<div class="parent">
<div class="child">控制復(fù)雜性是計算機編程的本質(zhì)。</div>
</div>
.parent {
height: 140px;
position: relative;
border: 2px dashed #f69c55;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
color:#fff;
background: #000;
}
固定高度塊級元素居中
未知高度的塊級元素
當垂直居中的塊級元素高度未知時，可以借助CSS3中的transform屬性向Y軸反向偏移50%的方法實現(xiàn)垂直居中，部分瀏覽器可能存在兼容性問題。
<div class="parent">
<div class="child">世界上有 10 種人，懂二進制的和不懂二進制的。</div>
</div>
.parent {
height: 140px;
position: relative;
border: 2px dashed #f69c55;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: black;
color: #fff;
padding: 1rem;
width: 12rem;
}
3、水平垂直居中
3.1、固定寬高元素水平垂直居中
通過margin平移元素整體寬度的一半，使元素水平垂直居中。
<div class="parent">
<div class="child">控制復(fù)雜性是計算機編程的本質(zhì)。</div>
</div>
.parent {
height: 140px;
position: relative;
border: 2px dashed #f69c55;
}
.child {
width: 200px;
height: 80px;
padding: 10px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -110px;
background: black;
color: #fff;
}
固定寬高水平居中
3.2、未知寬高元素水平垂直居中
利用2D變換，在水平和垂直方向都反向平移寬高的一半，從而使元素水平垂直居中。
<div class="parent">
<div class="child">當你試圖解決一個你不理解的問題時，復(fù)雜化就產(chǎn)成了。當你試圖解決一個你不理解的問題時，復(fù)雜化就產(chǎn)成了。</div>
</div>
.parent {
height: 140px;
position: relative;
border: 2px dashed #f69c55;
}
.child {
padding: 10px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
background: black;
}
未知寬高元素水平居中
3.3、利用flex布局
利用flex布局，其中justify-content用于設(shè)置或檢索彈性盒子元素在主軸上方向上的對齊方式；而align-items屬性定義flex子項在flex容器的當前行的側(cè)軸方向上的對齊方式。
<div class="parent">
<div class="child">Facebook wasn't built in a day.</div>
</div>
.parent {
height: 140px;
display: flex;
justify-content: center;
align-items: center;
border: 2px dashed #f69c55;
}
.child {
padding: 20px;
background: black;
color: #fff;
}
flex布局水平垂直居中
最后附贈一張居中總結(jié)的圖
CSS居中
