作为一个初学者，已被各种情况下的垂直水平居中搞晕，于是乎，记录下我所遇到的一些情况下的垂直水平居中。有错误，欢迎指正哦！哦，这也是我人生中的第一篇博客儿。
一、容器中的元素居中
1、块级元素中的块级元素居中（ps：注意看代码中的注释部分哦）
- margin和table-cell
.div1{
height:200px;
width:200px;
border:1px solid red;
margin:20px;
display:table-cell; /* 由于table－cell方式显示时，margin，padding都不起作用，但是不影响子元素 */
vertical-align:middle;
}
.test{
height:50px;
width:100px;
border:1px solid blue;
margin-left:auto; /* 放在要居中的行内元素上 */
margin-right:auto;
}
<div class="div1">
<div class="test">
1.我是块级元素div
</div>
</div>
结果图
- position及负margin（结果图和上面一样）
.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.我是块级元素div
</div>
</div>
- 绝对定位法（结果图和方法一一样）
.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会在内容高度超过容器高度的情况下给内容块显示滚动条而不越界 */
position:absolute;
top:0;right:0;bottom:0;left:0;
margin:auto;
}
<div class="div4">
<div class="test4">
4.我是块级元素div
</div>
</div
我是从网上查资料得到的绝对定位法，具体参考http://blog.csdn.net/freshlover/article/details/11579669
- padding法（父容器和子容器都要是固定高度，才能计算padding）
.div1{
height:200px;
width:200px;
border:1px solid red;
margin:20px;
box-sizing:border-box;/*这里计算父元素padding-left的方法为(父元素宽度-子元素宽度)/2*/
padding-left:50px; /* (200-100)/2 */
padding-top:75px;
}
.test{
height:50px;
width:100px;
border:1px solid blue;
}
<b>注：如果不设定box-sizing:border-box，浏览器默认content-box，计算父容器的padding-left的方式就是[（父容器宽度+左右border宽度）-(子容器宽+水平padding宽+左右border宽)]/2
当然，同理可以设置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>这个方法也可以用于“块级元素中的行内元素居中”的情况,不过兼容性不是很好，查是否兼容可以点击http://caniuse.com/<b>
2、块级元素中的行内元素居中
.div2{
height:200px;
width:200px;
border:1px solid red;
margin-bottom:20px;
text-align:center; /* 注意：text－align只作用于块级元素下的文本或行内元素，对块级元素本身和子元素为块级元素无作用 */
display:table-cell;
vertical-align:middle;
}
.btn{
display:inline-block; /* 由于a是行内元素，高宽不可以控制，故display一下 */
height:50px;
width:100px;
border:1px solid blue;
}
<div class="div2">
<a href="#" class="btn">
2.我是行内元素a
</a>
</div>
结果图
二、文本居中
1、单行文本居中
.div1{
height:200px;
width:200px;
border:1px solid red;
line-height:200px;
text-align:center;
}
<b>注：如果里面的文字是p或h1这些标签则要小心，它们有默认的magin和padding值，所以要先清零。或者我们可以直接在css文件开头写个“*{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.我是块级元素div1.我是块级元素div1.我是块级元素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>结果不如人意，为什么呢？因为display：table－cell显示时margin，padding都是没有作用的。因此，遇到这种情况，可以算padding，也可以用上面的方法，只不过元素居中则要改成flexbox的方式（因为这个方式里没有涉及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会在内容高度超过容器高度的情况下给内容块显示滚动条而不越界 */
display:inline-block;
font-size:16px;
vertical-align:middle;
}
<div class="div5">
<div class="test5">
5.我是块级元素div5.我是块级元素div5.我是块级元素div5.我是块级元素div
</div>
很多人用这种方法做居中不能理解哎，文本是多行貌似是居中显示，但是是单行就不居中，况且去掉text－align：center；多行也不居中了？菜鸟一枚，求懂者解答，谢谢
总结
我觉得用的最多也是最重要的就是text-align:center 和 margin:0 auto;
作为新手要区分好它们。
<style>
p{
width:200px;
background-color:red;
margin:0 auto; /* 让p元素在父元素中水平居中 */
text-align:center; /* 让p元素内的文本居中 */
}
</style>
<body>
<p>aaaa</p>
</body>
网友评论