文章目录
一、垂直居中
transform方法,calc方法
元素高度已知的情况下,可以使用calc函数动态计算达到垂直居中所需高度
calc(50%-?px),?为自身高度一半
calc为css3新增,可以使用top: 50%; margin-top: -?px; 代替
.center {
height: 300px;
background: #f00;
}
.center div {
position: relative;
width: 100px;
height: 100px;
background: #0ff;
top: calc(50% - 150px);
}
元素高度未知的情况,可以使用 transform中的translate参数对元素自身进行平移
translate参数是以元素本身的宽高为基准,所以向上平移自身高度50%的距离即可实现垂直居中
子元素必须要加上position:relative,否则无效
.center {
height: 1000px;
background: #f00;
}
.center div {
position: relative;
top: 50%;
transform: translateY(-50%);
}
flex方法
使用flex布局,将align-items参数设定为居中即可
.center {
display: flex;
align-items: center;
height: 300px;
background: #f00;
}
.center div {
width: 100px;
height: 100px;
background: #0ff;
}
line-height方法
该方法仅适用于“单行”的“行内元素”
.center {
height: 100px;
background: #f00;
line-height: 100px;
text-align: center;
}
.center div {
display: inline-block;
background: #0ff;
}
伪元素(::after,::before)方法
面对多行的元素时可以使用此方法解决垂直居中问题
.center {
height: 300px;
background: #f00;
text-align: center;
}
.center::after {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.center div {
height: 100px;
width: 100px;
display: inline-block;
vertical-align: middle;
background: #0ff;
}
绝对定位(margin:auto)方法
使用绝对定位方法,将元素的position指定为absolute,父元素的position必须要指定为relative
将top,left,right,bottom都设置为0,让子盒子与父容器的间距为0
top,left,right,bottom属性只在position存在且不为"static"时生效
.center {
position: relative;
height: 300px;
background: #f00;
}
.center div {
height: 100px;
width: 100px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #0ff;
}
二、水平居中
行内元素
.center{
text-align:center;
}
块级元素
元素宽度已知,直接使用margin
.center {
width: 100px;
margin: 0 auto;
background-color: #f00;
}
元素宽度未知,将元素设为display:table
.center {
display: table;
margin: 0 auto;
background-color: #f00;
}
其他方法
水平居中与垂直居中多数方法的使用是类似的,在flex布局中使用justify-content:center;即可实现水平居中
使用position + calc,position +transform,以及绝对定位设四方间距为0,margin:auto的方法均可实现
总结
在平常学习中对于垂直居中问题,使用flex和transform的次数较多,今天总结了更多解决方法,在不同环境下使用对应的方法以便更妥善的解决问题,对于各类方法的基础使用有所掌握,对于部分方法的实现原理和弊端还不太了解,等工作之后深入学习再加以扩展。