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

CSS中，将一个div元素上下左右居中显示是一项常见的任务。下面是一些方法逐一介绍。

/* 方法1：使用绝对定位 */
div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 方法2：使用flex布局 */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 方法3：使用grid布局 */
.container {
  display: grid;
  place-items: center;
} 

以上方法各有特点，可以根据需要选择使用。这里简单介绍一下各方法的作用。

方法1使用绝对定位，将div元素的坐标定位到父元素的中心点。利用CSS3的transform属性，将div向上和向左平移50%自身宽高的距离，从而实现对div元素的上下左右居中显示。

方法2使用了flex布局，在父元素中使用justify-content和align-items分别设置主轴和交叉轴的对齐方式为center，将div元素垂直和水平居中显示。

方法3则是使用grid布局，使用place-items属性将div元素中心点对齐到父元素的中心点。

以上三种方法是实现CSS居中显示div元素的常用方法，还可以根据实际情况选择使用其他方法。