css中实现垂直居中显示 |css secret中文版

.container {
display: flex; /* 使用flexbox布局 */
align-items: center; /* 垂直居中 */
}

以上是一种最为简单的方式，通过设置容器的display属性为flex，再设置align-items属性为center，就可以轻松地实现垂直居中显示。
下面是另外一种比较常见的方式，通过设置容器和子元素的position和top属性来达到目的：

.container {
position: relative;
}
.container img {
position: absolute; /* 改为绝对定位 */
top: 50%; /* 顶部距离为50% */
transform: translateY(-50%); /* 通过向上移动50%的高度来实现垂直居中 */
}

以上是设置子元素绝对定位的方式，同样，也可以通过设置容器绝对定位，再让子元素相对定位来实现垂直居中。

总的来说，以上两种方法都很常见，视具体情况而定。值得一提的是，现在也有采用grid布局实现垂直居中的方式，但是相对较为复杂，这里就不做展开介绍。