CSS3技巧36：让内容垂直居中的三种方式
warning:
这篇文章距离上次修改已过195天，其中的内容可能已经有所变动。
在CSS中，有几种方法可以使内容垂直居中。以下是三种常见的方法：
- 使用Flexbox布局:
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}- 使用Grid布局:
.container {
display: grid;
place-items: center; /* 水平和垂直居中 */
}- 使用绝对定位和transform:
.container {
position: relative;
}
.content {
position: absolute;
top: 50%;
transform: translateY(-50%);
/* 如果需要水平居中，还需要设置左边距并加上transform: translate(-50%, -50%); */
}这三种方法各有优缺点，Flexbox和Grid相对更简单易用，而绝对定位和transform则提供了更多的定制化选项。根据具体需求选择合适的方法。
评论已关闭