居中设疑谈方法，设计布局找思路

2023-10-08 01:24:30

作为前端开发工程师，面对页面中一个元素水平垂直居中这样一个需求，是再平常不过了。这儿我们讨论的是元素在整个视口中的水平和垂直居中，而不是在它的父元素中居中。

我们来看看这几种比较常用的方法：

使用flex布局

<div class="container">
  <div class="item">居中元素</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

使用flex布局实现水平和垂直居中，是比较简单和直接的方式。通过设置.container的display属性为flex，将其转换为一个flex容器。然后，设置justify-content属性为center，使其子元素在水平方向上居中对齐；设置align-items属性为center，使其子元素在垂直方向上居中对齐。最后，设置.container的高度为100vh，使其占据整个视口的高度。

使用CSS网格布局

<div class="container">
  <div class="item">居中元素</div>
</div>

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

使用CSS网格布局实现水平和垂直居中，也是比较简单和直接的方式。通过设置.container的display属性为grid，将其转换为一个网格容器。然后，设置place-items属性为center，使其子元素在水平和垂直方向上居中对齐。最后，设置.container的高度为100vh，使其占据整个视口的高度。

使用绝对定位

<div class="container">
  <div class="item">居中元素</div>
</div>

.container {
  position: relative;
  height: 100vh;
}

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

使用绝对定位实现水平和垂直居中，也是一种比较常见的方式。通过设置.container的position属性为relative，使其成为一个定位容器。然后，设置.item的position属性为absolute，使其成为一个绝对定位的元素。接着，设置.item的top和left属性都为50%，使其在水平和垂直方向上都居中对齐。最后，设置.item的transform属性为translate(-50%, -50%)，使其相对于它的父元素向上和向左平移50%，从而实现水平和垂直居中。