css盒子中div元素居中显示

在CSS中，盒子布局可以说是最为重要的一部分，而

元素则是最为常见的HTML标签之一。在实际中，我们经常需要把

元素居中显示，这里就介绍一下几种常见的实现方式。


// 第一种方式：使用margin属性
div {
  width: 200px;
  height: 100px;
  margin: auto;
}

// 第二种方式：使用position和top、left属性
div {
  position: absolute;
  width: 200px;
  height: 100px;
  top: 50%;
  left: 50%;
  margin-top: -50px; /* 高度一半 */
  margin-left: -100px; /* 宽度一半 */
}

// 第三种方式：使用flex布局
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

css盒子中div元素居中显示

上述三种方式分别使用了margin属性、position和top、left属性、flex布局来实现

元素居中显示。其中，margin属性是最为简单的方式，只需为

元素设置margin:auto即可实现；position和top、left属性需要先将

元素的定位方式设置为absolute，然后再将top和left设置为50%，最后使用margin对元素进行微调，将其定位到正中心；而flex布局则是现代Web开发中使用最为广泛的之一，可以直接将容器的display属性设置为flex，然后使用justify-content和align-items属性让

元素在容器中居中显示。