CSS的样式居中总结
一、父容器宽度确定时水平居中
(1)通过margin: 0 auto; text-align: center实现CSS水平居中。
这种方法是实现CSS水平居中最最常用的,我在前端开发中大概有60%的CSS水平居中就是通过“margin: 0 auto; text-align: center”实现的。
(2)通过display:flex实现CSS水平居中。
随着越来越多兼容flexbox,所以通过“display:flex”实现CSS水平居中的方案也越来越受青睐。通过display:flex实现CSS水平居中的原理是父元素display:flex;flex-direction:column;而子元素align-self:center;这个跟CSS垂直居中的原理是一样的,只是在flex-direction上有所差别,一个是row(默认值),另外一个是column。
(3)通过display:table-cell和margin-left实现CSS水平居中。
对于父元素和子元素的宽度都确定的情况,适合通过display:table-cell和margin-left实现CSS水平居中。使用时,父元素display:table-cell,子元素给剩余宽度一半的margin-left。
(4)通过position:absolute实现CSS水平居中。
这种方法跟上一个方法适用场景一样,也是适用于父元素和子元素的宽度都确定的情况。使用时,父元素position:absolute,子元素给剩余宽度一半的margin-left。
(5)通过width:fit-content实现CSS水平居中。
这种方法可以确保子元素宽度不确定的情况下,也能实现CSS水平居中。需要注意的是,需要配合“margin: 0 auto; text-align: center”使用。
二、父容器宽度不确定时水平居中
(1)position:relative:left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);//这里的50%是指盒子本身的50%;
![](/qrcode.jpg)
(2) width:fit-content;width:-moz-fit-content;width:-webket-fit-content;margin:auto;
三、水平垂直居中
(一)脱离文档流元素
1、margin:auto法
CSS代码:
div{
width: 300px;
height: 300px;
position: relative;
border: 1px solid #465468;
}
img{
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
HTML代码:
<div>
<img src="prince.png">
</div>
(2) 负margin法
CSS代码:
.container{
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;
}
.inner{
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;
margin-top: -190px; /*height的一半*/
margin-left: -240px; /*width的一半*/
}
HTML代码:
<div class="container">
<div class="inner"></div>
</div>
(二)未脱离文档流元素的居中
(1)table-cell法
div{
border: 3px solid #555;
width: 300px;
height: 200px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
span{
vertical-align: middle;
}
HTML代码:
<div>
<span>这是放在span中的文字,通过外层div设置display: table-cell以及vertical-align: middle实现垂直居中。</span>
</div>
(2)弹性盒子法
CSS代码:
.container{
width: 300px;
height: 200px;
border: 3px solid #546461;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.inner{
border: 3px solid #458761;
padding: 20px;
}
HTML代码:
<div class="container">
<div class="inner">
我在容器中水平垂直居中
</div>
</div>