在 CSS 中,可以使用 display: flex
和 justify-content: center
实现水平居中对齐。同时,使用 align-items: center
可以实现垂直居中对齐。下面是示例代码:
.container {
display: flex;
justify-content: center;
align-items: center;
}
其中,.container
是包含要对齐元素的父元素的类名。使用 display: flex
将其设置为一个 flex 容器。使用 justify-content: center
将子元素水平居中对齐,使用 align-items: center
将其垂直居中对齐。
除此之外,还可以使用 position: absolute
和 transform
来控制水平垂直居中对齐。下面是示例代码:
.container {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
其中,.container
是包含要对齐元素的父元素的类名。使用 position: relative
将其设置为相对定位。.child
是要对齐的子元素的类名。使用 position: absolute
将其设置为绝对定位。使用 top: 50%
和 left: 50%
将其移动到父元素的中心位置。使用 transform: translate(-50%, -50%)
将其向左上方移动自身宽高的一半,从而实现水平垂直居中对齐。
以上是常用的控制垂直居中方式以及水平对齐方式的 CSS 属性和方法。