如何使用css让盒子水平垂直居中&&&重要&& 面试常问题
我们只记住最常用的 就不怕混乱搞忘记啦~~
1. 弹性布局—flex (推荐)
在父级元素上设置弹性盒,(父级元素形成一个可伸缩的容器) 子级元素就能实现垂直水平居中
display:flex
触发弹性盒
justify-content: center;
主轴方向居中对齐
align-items: center;
侧轴方向居中对齐
<div class="Father">
<div class="Son">我要C位</div>
</div>
<style>
.Father{
width: 200px;
height: 200px;
background: #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.Son{
width: 100px;
height: 100px;
background: pink;
}
</style>
2. 定位属性—绝对定位 (父相子绝)
父级设置相对定位relative,子级设置绝对定位absolute
1. margin设为auto, 上,下,左,右都设为0;(推荐)
(兼容性好,适用于未知元素尺寸的情况)
<style>
.Father{
width: 200px;
height: 200px;
background: #ccc;
position: relative;
}
.Son{
width: 100px;
height: 100px;
background: pink;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
2. transform 居中;(IE9以下不兼容)
top,left 设置50%, ‘回移’元素本身宽/高度的50%
(兼容性差,适用于未知元素尺寸)
<style>
.Father{
width: 200px;
height: 200px;
background: #ccc;
position: relative;
}
.Son{
width: 100px;
height: 100px;
background: pink;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50% , -50% );
}
</style>
3. 传统方法 负margin值居中;(不推荐)
top,left 设置50%, 减去元素本身宽高度的一半
(兼容性好,但需要知道元素本身的尺寸,限制性较大)
<style>
.Father{
width: 200px;
height: 200px;
background: #ccc;
position: relative;
}
.Son{
width: 100px;
height: 100px;
background: pink;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
4. 知道元素的尺寸直接计算,通过margin设置居中
margin-top = 父盒子宽度一半 — 子盒子宽度一半
margin-tleft = 父盒子宽度一半 — 子盒子宽度一半
.Son{
width: 100px;
height: 100px;
background: pink;
position: absolute;
margin-top:25px;
margin-left:25px;
}
3. table布局—table-cell 居中
css新增的table属性,table单元格模式默认垂直居中,父元素变成table单元格模式垂直居中,子元素上实现水平居中。
父元素设置:
display: table-cell;
变为单元格模式
vertical-align: middle;
元素在垂直方向对齐方式垂直居中
子元素设置:
子元素如果是行内元素或者行内块元素:
父级使用text-align: center;
实现水平居中。
子元素如果是块级元素:
子元素直接使用margin:auto;
如果子元素是块级元素
<style>
.Father{
width: 200px;
height: 200px;
background: #ccc;
display: table-cell; *1*父元素变成tabel单元格模式,下面的子元素垂直居中显示
vertical-align: middle; *2*设置父元素在垂直方向对齐方式
}
.Son{
width: 100px;
height: 100px;
background: pink;
margin: auto; *3*块级元素水平居中
}
</style>
<body>
<div class="Father">
<div class="Son">我要C位</div>
</div>
</body>
如果子级元素是行内元素或者行内块元素
<style>
.Father{
width: 200px;
height: 200px;
background: #ccc;
display: table-cell; *1*父元素变成tabel单元格模式
vertical-align: middle; *2*设置元素在垂直方向对齐方式
text-align: center; *3*行内块元素水平居中
}
</style>
4. 只针对行内元素(不包含行内块元素)
父元素:
text-align:center
子元素:
line-height: 为父元素的高