css如何垂直居中一個(gè)元素的問(wèn)題已經(jīng)是一個(gè)老生常談的問(wèn)題了。
不管對(duì)于一個(gè)新手或者老手，在面試過(guò)程中是經(jīng)常被問(wèn)到的。前兩天在看一個(gè)flex的
視頻教程，當(dāng)中提到了有關(guān)元素的居中問(wèn)題，所以今天小編就來(lái)扒一扒幾種常見(jiàn)
的方式。不足之處請(qǐng)大家批評(píng)指正（所有的代碼都是自己親手敲過(guò)可用的）
1、水平居中（margin:0 auto;）
關(guān)于這個(gè)，大家應(yīng)該是最不陌生的,不管是在培訓(xùn)班還是自己自學(xué)的話 。這個(gè)應(yīng)該是
老師講的第一個(gè)方法了（水平方向上），但是其有一個(gè)前提，就是被包裹的元素
不能有浮動(dòng)的屬性。否則的話這個(gè)屬性就會(huì)失效。具體如下圖代碼：
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red;
}
item{
margin:0 auto;
width: 100px;
height: 100x;
background: green;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body> 
2、水平居中（text-align：center;）
這個(gè)屬性在沒(méi)有浮動(dòng)的情況下，我們可以將其轉(zhuǎn)換為inline/inline-block，
然后其父元素加上text-align:center;屬性就可以將其居中
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red;
text-align:center;
}
item{
display:inline/inline-block;
width: 100px;
height: 100x;
background: green;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
3、水平垂直居中（一） 子元素相對(duì)于父元素絕對(duì)定位，
并且margin值減去自己寬高的一半
該方法具有一定的局限性，因?yàn)槠浔仨氁雷釉乇旧淼膶捀?/P>
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red;
position: relative;
}
item{
position: absolute; top: 50%; left: 50%;
margin-top: -50px; margin-left: -50px;
width: 100px;
height: 100x;
background: green;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
4、水平垂直居中（二） 子元素相對(duì)于父元素絕對(duì)定位，并且margin值位auto
該方式不受元素寬高所限制，比較好用（推薦使用）
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red;
position: relative;
}
item{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top:0; margin: auto;
width: 100px;
height: 100x;
background: green;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
5、水平垂直居中（三） diplay：table-cell
該方式是將元素轉(zhuǎn)換成表格樣式，再利用表格的樣式來(lái)進(jìn)行居中（推薦）
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red; display: table-cell; vertical-align: middle;
}
item{ margin:0 auto;
width: 100px;
height: 100x;
background: green;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
6、水平垂直居中（四） 絕對(duì)定位和transfrom
該方法用最能裝逼，用到了css3變形，面試者看到你代碼里面有這樣的 ，
你的逼格瞬間就上去了，當(dāng)然了 你知道的，逼格的東西是有兼容性問(wèn)題的
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red;
position:relative;
}
item{
width: 100px;
height: 100x;
background: green;
position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
7、水平垂直居中（五）css3中的flex屬性
這個(gè)屬性很好用，但是絕逼有兼容性問(wèn)題的，用者要注意
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red; display: flex; justify-content: center; align-items: center;
}
item{
width: 100px;
height: 100x;
background: green;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body> 
是不是突然覺(jué)得居中的方法好簡(jiǎn)單啊！！！！！！！！！！！！！
【 微信掃一掃 】
