前端開發(fā)中酱虎，我們經(jīng)常需要對元素進(jìn)行水平垂直居中雨膨。為此，特地總結(jié)了讓元素居中的方法读串。
水平居中text-align：center;
這個是沒有浮動的情況下聊记，我們可以先將要居中的塊級元素設(shè)為inline/inline-block，然后在其父元素上加上屬性text-align:center;即可恢暖。如果要居中的塊級元素直接是內(nèi)聯(lián)元素（span排监、img、a等）杰捂，直接在其父級元素上加上屬性text-align:center;即可舆床；
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 731771211，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)嫁佳，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻挨队，PDF）
.way {
border: 1px solid red;
width: 250px;
}
.way img {
max-width: 200px;
}
.way1 {
text-align: center;
font-size: 0px;
//HTML圖片之間，瀏覽器會產(chǎn)生默認(rèn)的間距，父元素設(shè)置font-size：0px;可以很好地解決這個問題。
}
<div class="way way1">
<img src="fj.jpg" alt="">
</div>
使用margin：0 auto;水平居中
前提：居中的元素必須是塊級元素高帖，如果是內(nèi)聯(lián)元素吊洼，需要添加屬性display:block;而且元素不浮動。
.way2 img {
display: block;
margin: 0 auto;
}
<div class="way way2">
<img src="fj.jpg" alt="">
</div>
定位實現(xiàn)居中（需計算偏移值）
前提：必須知道設(shè)置要居中元素的寬高
.way3 {
position: relative;
width: 250px;
height: 250px;
}
.way3 img {
width: 200px;
height: 140px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -70px;
}
定位實現(xiàn)居中（不需計算偏移值，margin：auto;和四個方向定位搭配使用）
這種方法的好處是不需要知道元素的寬高，而且瀏覽器的兼容性好。
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 731771211蝶俱，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻饥漫，PDF）
.way4 {
position: relative;
width: 250px;
height: 250px;
}
.way4 img {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
定位配合css3新屬性transform：translate（x,y）使用
該方法的優(yōu)點是不需要知道元素的寬度和高度榨呆，在移動端用的比較多，因為移動端對css3新屬性的兼容性比較好庸队。
.way5 {
position: relative;
width: 250px;
height: 250px;
}
.way5 img {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
css3新屬性calc()和定位配合使用（需要知道元素的寬高）
- 用于動態(tài)計算長度值愕提。
- 需要注意的是馒稍，運算符前后都需要保留一個空格，例如：width: calc(100% - 10px)浅侨；
- 任何長度值都可以使用calc()函數(shù)進(jìn)行計算纽谒；
- calc()函數(shù)支持 "+", "-", "*", "/" 運算；
- calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運算優(yōu)先級規(guī)則如输；
.way6 {
position: relative;
width: 250px;
height: 250px;
}
.way6 img {
width: 200px;
height: 140px;
position: absolute;
left: calc(50% - 100px);
top: calc(50% - 70px);
}
jquery實現(xiàn)水平垂直居中
jquery實現(xiàn)水平和垂直劇中的原理是通過jquery設(shè)置div的css鼓黔，獲取div的左，上的邊距偏移量不见，邊距偏移量的算法就是用頁面窗口的寬度減去該div的寬度澳化，得到的值再除以2即左偏移量，右偏移量算法相同稳吮。注意div的css設(shè)置要在resize（）方法中完成缎谷，就是每次改變窗口大小是，都要執(zhí)行設(shè)置div的css灶似，代碼如下：
$(function(){
$(window).resize(function(){
$('.mydiv').css({
position:'absolute',
left:($(window).width()-$('.mydiv').outerWidth())/2,
top:($(window).height()-$('.mydiv').outerHeight())/2
});
});
})
此方法的好處就是不需要知道div 的具體寬度和高度列林，直接用jquery就可以實現(xiàn)水平和垂直居中，并且兼容各種瀏覽器酪惭。這個方法在很多的彈出層效果中應(yīng)用希痴。
使用彈性布局flex居中
使用flex居中不需要知道元素本身寬高以及元素的屬性。
web前端開發(fā)學(xué)習(xí)Q-q-u-n： 731771211春感，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)砌创，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項目實戰(zhàn)教學(xué)視頻，PDF）
.way7 {
width: 250px;
height: 250px;
display: flex;
justify-content: center;/*水平居中*/
align-items: center;/*垂直居中*/
}
使用display:table-cell;居中
組合使用display:table-cell和vertical-align鲫懒、text-align嫩实，使父元素內(nèi)的所有行內(nèi)元素水平垂直居中（內(nèi)部div設(shè)置display:inline-block即可）。這在子元素不確定寬高和數(shù)量時窥岩，特別實用舶赔！
.way8 {
display: table-cell;
width: 250px;
height: 250px;
text-align: center;
vertical-align: middle;
float: none;
}
.way8 img {
display: inline-block;
}
特別提醒：
- 1.table-cell不感知margin，在父元素上設(shè)置table-row等屬性谦秧，也會使其不感知height。
- 2.設(shè)置float或position會對默認(rèn)布局造成破壞撵溃，可以考慮為之增加一個父div定義float等屬性疚鲤。
