[分享]css中div上下左右居中

CSS中div上下左右居中的实现方法有多种，下面我们来一一了解一下。

首先，我们先给div添加以下样式：

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

这段代码的作用是把div元素的左上角定位到页面的中心点。其中，position属性的值为absolute，是为了实现相对于父元素进行定位；top和left属性的值都为50%，是为了将div元素的中心点定位到页面的中心点；transform属性的值是translate(-50%, -50%)，是为了将div元素自身宽高的一半作为偏移量，达到居中的目的。

除了上述方法外，还有一种比较简单的居中方式，就是使用flex布局。代码如下：

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

这段代码的作用是将div元素的子元素按照居中方式进行排列。其中，display属性的值为flex，是为了实现弹性布局；justify-content属性的值为center，是为了让子元素在水平方向居中对齐；align-items属性的值也为center，是为了让子元素在垂直方向居中对齐。

最后，我们再介绍一种CSS3新增的属性 —— calc()。这个属性可以进行数学计算，从而实现元素的居中。代码如下：

div {
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
} 

这段代码的作用是将div元素的左上角定位到页面的中心点。其中，position属性的值为absolute，是为了实现相对于父元素进行定位；top和left属性的值都是calc(50% - 100px)，其中，“50%”表示元素相对于页面的垂直居中，而“- 100px”则表示元素自身宽高的一半，实现相对于页面的水平居中。