作為一個(gè)初學(xué)者，已被各種情況下的垂直水平居中搞暈笙僚，于是乎芳肌，記錄下我所遇到的一些情況下的垂直水平居中。有錯(cuò)誤，歡迎指正哦亿笤！哦翎迁，這也是我人生中的第一篇博客兒。
一净薛、容器中的元素居中
1汪榔、塊級(jí)元素中的塊級(jí)元素居中（ps：注意看代碼中的注釋部分哦）
- margin和table-cell
.div1{
height:200px;
width:200px;
border:1px solid red;
margin:20px;
display:table-cell; /* 由于table－cell方式顯示時(shí)，margin肃拜，padding都不起作用痴腌，但是不影響子元素 */
vertical-align:middle;
}
.test{
height:50px;
width:100px;
border:1px solid blue;
margin-left:auto; /* 放在要居中的行內(nèi)元素上 */
margin-right:auto;
}
<div class="div1">
<div class="test">
1.我是塊級(jí)元素div
</div>
</div>
- position及負(fù)margin（結(jié)果圖和上面一樣）
.div3{
height:200px;
width:200px;
border:1px solid red;
margin-top:20px;
position:relative;
}
.test3{
height:50px;
width:100px;
border:1px solid blue;
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-50px;
}
<div class="div3">
<div class="test3">
3.我是塊級(jí)元素div
</div>
</div>
- 絕對(duì)定位法（結(jié)果圖和方法一一樣）
.div4{
height:200px;
width:200px;
border:1px solid red;
margin-top:20px;
position:relative;
}
.test4{
height:50px;
width:100px;
border:1px solid blue;
overflow:auto; /* 加上overflow: auto會(huì)在內(nèi)容高度超過容器高度的情況下給內(nèi)容塊顯示滾動(dòng)條而不越界 */
position:absolute;
top:0;right:0;bottom:0;left:0;
margin:auto;
}
<div class="div4">
<div class="test4">
4.我是塊級(jí)元素div
</div>
</div
我是從網(wǎng)上查資料得到的絕對(duì)定位法，具體參考http://blog.csdn.net/freshlover/article/details/11579669
- padding法（父容器和子容器都要是固定高度燃领，才能計(jì)算padding）
.div1{
height:200px;
width:200px;
border:1px solid red;
margin:20px;
box-sizing:border-box;/*這里計(jì)算父元素padding-left的方法為(父元素寬度-子元素寬度)/2*/
padding-left:50px; /* (200-100)/2 */
padding-top:75px;
}
.test{
height:50px;
width:100px;
border:1px solid blue;
}
<b>注：如果不設(shè)定box-sizing:border-box士聪，瀏覽器默認(rèn)content-box，計(jì)算父容器的padding-left的方式就是[（父容器寬度+左右border寬度）-(子容器寬+水平padding寬+左右border寬)]/2
當(dāng)然柿菩，同理可以設(shè)置margin
<b>
- flex布局
.div1{
height:200px;
width:200px;
border:1px solid red;
margin:20px;
display:flex;
justify-content:center; /* flex布局 */
align-items:center;
}
.test{
height:50px;
width:100px;
border:1px solid blue;
}
<b>這個(gè)方法也可以用于“塊級(jí)元素中的行內(nèi)元素居中”的情況,不過兼容性不是很好，查是否兼容可以點(diǎn)擊http://caniuse.com/<b>
2雨涛、塊級(jí)元素中的行內(nèi)元素居中
.div2{
height:200px;
width:200px;
border:1px solid red;
margin-bottom:20px;
text-align:center; /* 注意：text－align只作用于塊級(jí)元素下的文本或行內(nèi)元素枢舶，對(duì)塊級(jí)元素本身和子元素為塊級(jí)元素?zé)o作用 */
display:table-cell;
vertical-align:middle;
}
.btn{
display:inline-block; /* 由于a是行內(nèi)元素，高寬不可以控制替久，故display一下 */
height:50px;
width:100px;
border:1px solid blue;
}
<div class="div2">
<a href="#" class="btn">
2.我是行內(nèi)元素a
</a>
</div>
二凉泄、文本居中
1、單行文本居中
.div1{
height:200px;
width:200px;
border:1px solid red;
line-height:200px;
text-align:center;
}
<b>注：如果里面的文字是p或h1這些標(biāo)簽則要小心蚯根，它們有默認(rèn)的magin和padding值后众，所以要先清零÷梗或者我們可以直接在css文件開頭寫個(gè)“*{margin:0;padding:0;}”<b>
2蒂誉、多行文本居中
.div1{
height:200px;
width:200px;
border:1px solid red;
text-align:center;
display:table-cell;
vertical-align:middle;
}
<div class="div1">
1.我是塊級(jí)元素div1.我是塊級(jí)元素div1.我是塊級(jí)元素div
</div>
3、多行文本居中的特殊情況
.div1{
height:200px;
width:200px;
border:1px solid red;
margin:20px;
display:table-cell;
vertical-align:middle;
}
.test{
height:50px;
width:100px;
border:1px solid blue;
margin-left:auto;
margin-right:auto;
text-align:center;
display:table-cell;
vertical-align:middle;
}
<b>結(jié)果不如人意距帅，為什么呢右锨？因?yàn)閐isplay：table－cell顯示時(shí)margin，padding都是沒有作用的碌秸。因此绍移，遇到這種情況，可以算padding讥电，也可以用上面的方法蹂窖，只不過元素居中則要改成flexbox的方式（因?yàn)檫@個(gè)方式里沒有涉及margin）<b>
新方法
.div5{
height:200px;
width:200px;
border:1px solid red;
margin-top:20px;
font-size:0;
text-align:center;
}
.div5:after{
content:'';
height:100%;
display:inline-block;
vertical-align:middle;
}
.test5{
overflow:auto; /* 加上overflow: auto會(huì)在內(nèi)容高度超過容器高度的情況下給內(nèi)容塊顯示滾動(dòng)條而不越界 */
display:inline-block;
font-size:16px;
vertical-align:middle;
}
<div class="div5">
<div class="test5">
5.我是塊級(jí)元素div5.我是塊級(jí)元素div5.我是塊級(jí)元素div5.我是塊級(jí)元素div
</div>
很多人用這種方法做居中不能理解哎，文本是多行貌似是居中顯示恩敌，但是是單行就不居中瞬测，況且去掉text－align：center；多行也不居中了？菜鳥一枚涣楷，求懂者解答分唾，謝謝
總結(jié)
我覺得用的最多也是最重要的就是text-align:center 和 margin:0 auto;
作為新手要區(qū)分好它們。
<style>
p{
width:200px;
background-color:red;
margin:0 auto; /* 讓p元素在父元素中水平居中 */
text-align:center; /* 讓p元素內(nèi)的文本居中 */
}
</style>
<body>
<p>aaaa</p>
</body>
