css中如何设置高度居中 |html好看的css样式

/* 垂直居中的一种方法 */
.container {
display: flex;
align-items: center;
justify-content: center;
}
/* 垂直居中的另一种方法 */
.container {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

方法一是利用flex布局，将容器的flex容器的垂直方向对齐方式设置为居中，利用justify-content和align-items两个属性来实现水平和垂直居中。这种方法非常简单，适用于大多数情况下。

方法二是利用相对定位和绝对定位来实现垂直居中。首先，大家将容器的position设置为relative，然后将子元素的position设置为absolute。接着，大家将子元素的top设置为50%，这样它就在容器的中间了。但是，子元素还会超出容器一半的高度，因此大家需要将它向上移动一半的高度，通过transform: translateY(-50%)来实现。这种方法比较复杂，但是可以适用于一些特殊的布局需求。