如何使用CSS做出：
1.左右布局/左中右布局
2.水平居中
3.垂直居中
左右布局/左中右布局
現(xiàn)在提供2種方法，實(shí)際操作推薦使用第二種方法：
方法一：
設(shè)置每個(gè)塊級(jí)元素的display屬性為inline-block；（display屬性規(guī)定元素該生成的框類型。inline-block是讓定義元素作為行內(nèi)塊元素。）,這樣定義會(huì)出現(xiàn)bug，所以還要設(shè)置該元素的vertical-align屬性為top來解決這個(gè)bug。然后給父元素加入text-align: center;可以實(shí)現(xiàn)塊狀子元素水平居中。
html:
<div class="father">
<div class="child">元素1</div>
<div class="child">元素2</div>
<div class="child">元素3</div>
</div>
css:
.father {
text-align: center;
}
.child {
display: inline-block;
vertical-align: top;
}
方法二：
給所有子元素添加float: left,同時(shí)給父元素添加clearfix類,為了解決浮動(dòng)出現(xiàn)的bug。
html:
<div class="father clearfix">
<div class="child">元素1</div>
<div class="child">元素2</div>
<div class="child">元素3</div>
</div>
css:
.clearfix::after{
content: '';
display: block;
clear: both;
}
.child {
float:left
}
水平居中
1.內(nèi)聯(lián)元素居中
將內(nèi)聯(lián)元素外部的塊級(jí)元素的text-align設(shè)置為center,即可實(shí)現(xiàn)內(nèi)聯(lián)元素(inline、inline-block)的水平居中，可設(shè)置內(nèi)聯(lián)元素的行高line-height控制內(nèi)聯(lián)元素所占高度。
html:
<div class="father">
<span class="child">水平居中</span>
</div>
css:
div.father{
text-align: center;
border: 1px solid red;
}
span.child{
line-height: 40px;
}
內(nèi)聯(lián)元素列表：
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea
內(nèi)聯(lián)元素由字體和字體相關(guān)設(shè)計(jì)師設(shè)置參數(shù)有關(guān)。高度不可以控制。
塊級(jí)元素高度由它內(nèi)部文檔流元素總和決定。
內(nèi)聯(lián)元素的margin屬性只能控制左右邊距
塊級(jí)元素水平居中
將固定寬度的塊級(jí)元素的margin-left和margin-right設(shè)置成auto，即可實(shí)現(xiàn)元素的水平居中
html:
<div class="father">
<div class="child">水平居中</div>
css:
div.father{
text-align: center;
border: 1px solid red;
height: 50px;
}
div.child{
border: 1px solid green;
height: 30px;
width: 80px;
margin: 0 auto;
}
多個(gè)塊級(jí)元素水平居中
將每個(gè)塊級(jí)元素的display設(shè)置為 inline-block，然后將它們的父容器的text-align設(shè)置為center,即可讓多個(gè)塊級(jí)元素水平居中。
html:
<div class="father">
<div class="child">塊級(jí)元素1</div>
<div class="child">塊級(jí)元素2</div>
<div class="child">塊級(jí)元素3</div>
<div class="child">塊級(jí)元素4</div>
</div>
css:
div.father{
text-align: center;
border: 1px solid red;
height: 50px;
}
div.child{
display: inline-block;
}
垂直居中
內(nèi)聯(lián)元素垂直居中
設(shè)置內(nèi)聯(lián)元素的行高(line-height)和內(nèi)聯(lián)元素的父元素的高度(height)相等，且內(nèi)聯(lián)元素的字體大小遠(yuǎn)小于行高，即可使內(nèi)聯(lián)元素垂直居中。
html:
<div class="father">
<span class="child">垂直居中</span>
</div>
css:
.father {
border: 1px solid red;
height: 80px;
}
.child {
line-height: 80px;
}
塊級(jí)元素垂直居中
1、固定高度的塊級(jí)元素
通過絕對(duì)定位元素距離頂部50%，并設(shè)置margin-top向上移元素高度的一半，即可實(shí)現(xiàn)垂直居中。
html:
<div class="father">
<span class="child">固定高度垂直居中</span>
</div
css:
.father {
border: 1px solid red;
position: relative;
height: 100px;
}
.child {
position: absolute;
top: 50%;
height:40px;
border: 1px solid green;
margin-top: -20px;
}
2、未知高度的塊級(jí)元素
借助css3中的transform屬性向Y軸反向偏移50%的方法實(shí)現(xiàn)垂直居中
html:
<div class="father">
<span class="child">未知高度垂直居中</span>
</div>
css:
.father {
border: 1px solid red;
position: relative;
height: 100px;
}
.child {
position: absolute;
top: 50%;
transform:translateY(-50%);
border: 1px solid green;
}
