在 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 属性和方法。