css 块级元素垂直居中

CSS中，要实现块级元素垂直居中并不是很容易。以下介绍几种实现方式：

方法一：使用flex布局.container {
      display: flex;
      justify-content: center;
        /* 水平居中 */  align-items: center;
       /* 垂直居中 */}
方法二：使用absolute定位.container {
      position: relative;
}
.content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}
方法三：使用table布局.container {
      display: table;
}
.content {
      display: table-cell;
      vertical-align: middle;
}
    

以上是实现块级元素垂直居中的几种方式，具体实现方式可根据实际情况进行选择。需要注意的是，在使用绝对定位的方式时，需要将容器设置为相对定位；在使用table布局的方式时，需要将容器设置为table，同时内部元素要设为table-cell，并设置垂直对齐方式。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！