元素实现垂直居中的几种方式
在网页开发中,实现元素的垂直居中是一个常见的需求。接下来就来介绍一下元素实现垂直居中的几种方式。
1、使用flex布局
.container {
display: flex;
align-items: center;
justify-content: center;
}
2. 使用绝对定位和transform属性
通过将元素设置为绝对定位,并使用top: 50%和transform: translateY(-50%)属性,可以实现元素在父容器中垂直居中。
.container {
position: relative;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3. 使用line-height属性
这种方式只能用于行内元素或者行内块元素,将父元素的高度设置为固定值,并将子元素line-height设置为相同的值,再使用text-align: center;属性,可以使元素或文本在垂直方向上居中。
.container {
height: 200px;
line-height: 200px;
text-align: center;
}
4、使用position+margin减去自身元素宽高的一半实现
.parent {
width: 100%;
height: 100%;
position: relative;
}
.child {
width: 400px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin: -200px 0 0 -200px; //四个方向分别是上右下左
}