如何使 div 居中 - CSS

在网页设计中，让元素居中是一个很常见的需求。本文将介绍几种方法让 div 元素居中。

水平居中

使用 margin 属性

可以给 div 元素设置一个固定宽度并使用 margin 属性来实现水平居中。

div {
  width: 200px;
  margin: 0 auto;
}

这样就可以让 div 水平居中了。其中，margin 的值由两部分组成，第一个为上下的 margin 值，第二个为左右的 margin 值，其中可以使用 auto 来表示自动计算空白部分的大小，使其平分在左右两侧。

使用 flex 布局

flex 布局是基于弹性盒子模型的一种布局方式，通过设置 flex 容器的属性可以实现水平居中。

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

其中，justify-content 属性的值为 center 表示水平居中，align-items 属性的值为 center 表示垂直居中。

垂直居中

使用绝对定位和 transform 属性

可以使用绝对定位和 transform 属性实现垂直居中。

.container {
  position: relative;
}

div {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

其中，top 属性的值为 50%，表示将 div 的顶部设置为容器的垂直中心，使用 transform 属性的 translateY 函数可以将其向上移动自身高度的一半。

使用 flex 布局

使用 flex 布局也可以实现垂直居中。

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

其中，justify-content 的值为 center 表示水平居中，align-items 的值为 center 表示垂直居中。

水平垂直居中

可以将上述两种方式结合使用，实现 div 元素的水平垂直居中。

使用绝对定位和 transform 属性

.container {
  position: relative;
}

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

其中，top 和 left 属性的值都为 50%，表示将 div 的中心点设置为容器的中心点。

使用 flex 布局

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

通过设置 flex 容器的属性可以实现水平和垂直居中，同时使用 justify-content 和 align-items 的值为 center 即可实现 div 元素的水平垂直居中。

总结

本文介绍了几种方法让 div 元素在网页中水平居中、垂直居中以及同时实现水平垂直居中。其中 margin 和 flex 布局是最常用的方式，可根据具体情况选择使用。