CSS中div水平垂直居中方法及代码

HTML

<div class="parent">
  <div class="child">要居中的内容</div>
</div>

CSS

1. 使用flex布局

.parent {
  display: flex; /*设置flex布局*/
  justify-content: center; /*水平居中*/
  align-items: center; /*垂直居中*/
  width: 100vw; /*占据整个屏幕宽度*/
  height: 100vh; /*占据整个屏幕高度*/
}

.child {
  width: 300px;
  height: 200px;
}

2. 使用绝对定位的代码

.parent {
  position: relative;
  width: 100vw; /*占据整个屏幕宽度*/
  height: 100vh; /*占据整个屏幕高度*/
}

.child {
  position: absolute; /*设置绝对定位*/
  top: 50%; /*将div定位到父容器的中心上方*/
  left: 50%; /*将div定位到父容器的中心左侧*/
  transform: translate(-50%, -50%); /*向左上方移动自身50%的宽度和高度即可完成居中*/
  width: 300px;
  height: 200px;
}

3. 使用grid布局的代码

.parent {
  display: grid; /*设置grid布局*/
  place-items: center; /*居中*/
  width: 100vw; /*占据整个屏幕宽度*/
  height: 100vh; /*占据整个屏幕高度*/
}

.child {
  width: 300px;
  height: 200px;
}