[分享]css元素在父容器内垂直居中

在网页设计中，常常需要使某些元素在其父容器内垂直居中。而CSS中也提供了各种实现垂直居中的方法。下面我们来看看其中常用的几种方式。 .parent { display: flex; justifyco...

在网页设计中，常常需要使某些元素在其父容器内垂直居中。而CSS中也提供了各种实现垂直居中的方法。下面我们来看看其中常用的几种方式。

 .parent {
    display: flex;
    justify-content: center;
    align-items: center;
  } 

以上是使用flex布局实现垂直居中的方法。通过将父容器设为flex布局，并分别使用justify-content:center和align-items:center来让其子元素在垂直方向上居中。这种方式简单易懂，且兼容性较好，是现在使用最广泛的垂直居中方式。

 .parent {
    position: relative;
  }
  .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  } 

此方法中的关键在于使用了绝对定位(position:absolute)和位移(transform:translateY(-50%))，在将子元素向上移动50%的高度，即达到了垂直居中的效果。需要注意的是父容器需要设置为相对定位(position:relative)，以确保子元素相对于父容器进行定位。

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

相关配合使用的是table-cell和vertical-align属性，在父容器设为table-cell后便可以使用vertical-align来控制子元素的垂直对齐方式。此方法的优点是兼容性较好，但需要注意的是对于行间距的处理需要额外处理。

以上是常用的三种CSS垂直居中方式。其中flex布局方式应用最多，也最为推荐。希望对大家有所帮助。