前端八股文 面试 css垂直水平居中的几种方式

1.flex 布局

父盒子 display flex

justify-content： center

align-items：center

然后子盒子就能垂直居中了

2.Grid 方式

.parent {
  display: grid;
  place-items: center; /* 这相当于 align-items: center 和 justify-items: center 的简写 */
}

<!-- HTML -->
<div class="parent">
  <div class="child">使用Grid布局实现水平和垂直居中</div>
</div>

3. 使用 position 和 transform

当元素尺寸未知时，可以使用此方法。

.parent {
  position: relative;
}

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

<!-- HTML -->
<div class="parent">
  <div class="child">无论尺寸如何都会水平和垂直居中</div>
</div>

4.水平居中

4.1水平居中 - 块级元素

.child {
  width: 300px; /* 需要给定一个宽度 */
  margin: 0 auto; /* 左右外边距自动分配 */
}

<!-- HTML -->
<div class="parent">
  <div class="child">这是要居中的块级元素</div>
</div>

总结

1.flex布局	2.Grid 方式	3. 使用 position 和 transform
父盒子 display flex justify-content： center align-items：center	.parent { display: grid; place-items: center; /* 这相当于 align-items: center 和 justify-items: center 的简写 */ }	.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
强烈推荐 ！！！！		子绝父相