[分享]css元素垂直居中屏幕高度

CSS是网页设计中非常重要的一部分，它可以帮助实现网页的布局、样式和动画等效果。其中一个常见的需求就是将某个元素垂直居中显示在屏幕的中央位置，下面我们来了解如何实现。/ 使用flex布局方式 / .c...

CSS是网页设计中非常重要的一部分，它可以帮助实现网页的布局、样式和动画等效果。其中一个常见的需求就是将某个元素垂直居中显示在屏幕的中央位置，下面我们来了解如何实现。

/* 使用flex布局方式 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

/* 使用table布局方式 */
.table {
  display: table;
  height: 100vh;
}

.cell {
  display: table-cell;
  vertical-align: middle;
} 

以上是两种常见的实现方式，一种是使用flex布局方式，另一种是使用table布局。其中，flex布局方式相对来说更加简单，只需要在父元素上设置display: flex; justify-content: center; align-items: center; 对齐方式，然后指定父元素的高度为100vh，就可以将子元素垂直居中。

而table布局方式则需要在父元素上设置display: table;并将父元素的高度设置为100vh，然后在子元素上设置display: table-cell; vertical-align: middle; 实现垂直居中。

总之，实现元素垂直居中是CSS布局设计中一个经常用到的需求，在设计时可以根据具体情况选取不同的布局方式来达到效果。