css垂直居中的5种方法

CSS垂直居中是网页设计中常用的技巧之一，下面介绍5种实现CSS垂直居中的方法。

代码一：.container {
      position: relative;
 }
.box {
      position: absolute;
       top: 50%;
      transform: translateY(-50%);
}
代码二：.container {
      display: flex;
      justify-content: center;
       align-items: center;
 }
代码三：.container {
      display: table-cell;
       vertical-align: middle;
}
.box {
      display: inline-block;
       vertical-align: middle;
}
代码四：.container {
       display: grid;
        justify-items: center;
        align-content: center;
 }
代码五：.container {
       display: block;
       margin: 0 auto;
       position: relative;
       top: 50%;
       transform: translateY(-50%);
}
    

方法一使用了 position: relative 和 position: absolute 进行定位，通过 top: 50% 和 transform: translateY(-50%) 来使目标元素垂直居中。

方法二使用了 Flexbox 布局，通过设置 display: flex 和属性 justify-content: center 和 align-items: center 来实现目标元素的垂直居中。

方法三中，使用了 table-cell 属性和 vertical-align 属性，table-cell 属性用于将容器表现为表格单元格，同时 vertical-align 属性用于垂直对齐。

方法四中，使用了 CSS Grid 布局，将 display 设为 grid，同时设置 justify-items: center 和 align-content: center 来实现垂直居中。

方法五中，将容器设为定位元素，通过 top 和 transform 同时设置相同的数值来实现目标元素的垂直居中。

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