css3 控制div居中

CSS3 提供了许多对 div 元素居中的方法，下面介绍几种常用的方法。

第一种方法：
{
  display: flex;
  justify-content: center;
  align-items: center;
}

使用 flexBox 线性布局，通过设置 justify-content 和 align-items 属性让 div 元素在水平和垂直方向上均居中。

第二种方法：
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

使用绝对定位，通过设置 top 和 left 属性让 div 元素的左上角与页面的中心对齐，再通过 transform 属性将其向左上方偏移自身高度和宽度的一半，即让其中心与页面中心对齐。

第三种方法：
{
  position: relative;
  margin: auto;
}

使用相对定位，通过设置 margin 属性让 div 元素的左右和上下间距均为 auto，即在父元素中水平和垂直方向上居中。