CSS 实现DIV水平垂直居中




/* 水平居中 */
.center-horizontal {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
 
/* 垂直居中 */
.center-vertical {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
 
/* 组合使用，水平垂直居中 */
.center-both {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这段代码定义了三个类，分别用于实现元素的水平居中、垂直居中以及同时实现水平和垂直居中。.center-horizontal 类使用 display: block 和 margin 属性来水平居中块级元素，而 .center-vertical 类使用 position 和 transform 属性来垂直居中元素。.center-both 类结合了水平和垂直居中的技巧，通过transform属性实现平移居中。

CSS 实现DIV水平垂直居中

评论已关闭

推荐阅读