浅谈最全面的水平垂直居中方案与flexbox布局

水平垂直居中的需求与问题

在前端开发中，经常会遇到需要在页面上实现水平、垂直居中的需求。例如，把一个div居中显示在页面上，或者是把图片和文字居中显示在一个容器中。但是很多时候，由于浏览器的不同，屏幕大小的不同等因素，常规的布局方法往往无法满足我们的需求，出现了无法居中的情况。

最全面的水平垂直居中方案

父容器是定宽高，子容器不定宽高的情况

方案1：绝对定位 + 负margin

.parent {
  position: relative;
  width: 200px;
  height: 200px;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方案2：flex布局

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

父容器是不定宽高，子容器不定宽高的情况

方案3：绝对定位 + margin:auto

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

方案4：flex布局

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

父容器是不定宽高，子容器是定宽高的情况

方案5：绝对定位 + margin

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  width: 100px;
  height: 100px;
}

方案6：flex布局

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  width: 100px;
  height: 100px;
}

flexbox布局

简介

flexbox布局是CSS3中新增加的一种布局方式，它在布局过程中，通过定义容器中项目的排列方式、对齐方式等属性来实现前端开发者对页面的比较精细的掌控，使用灵活、方便。它的目标是能够更好地处理不同设备上的不同分辨率的页面需求。

应用实例

实例1：垂直居中

<div class="parent">
  <div class="child">居中显示</div>
</div>

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #EEEEEE;
}
.child {
  padding: 10px 20px;
  background-color: white;
  border: 1px solid black;
}

在这个例子中，我们使用了flex的高度和宽度属性进行了控制，通过在 parent 容器中使用 display: flex; 和 align-items: center; 来完成容器高度的设置以及对容器子元素的垂直居中。同时，通过使用 justify-content: center; 让容器的子元素实现水平居中。

实例2：多行垂直居中

<div class="parent">
  <div class="child">文本1</div>
  <div class="child">文本2</div>
  <div class="child">文本3</div>
</div>

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #EEEEEE;
}
.child {
  padding: 10px 20px;
  margin: 5px;
  background-color: white;
  border: 1px solid black;
}

在这个例子中，我们使用了多个子元素，并使用margin属性创建了一部分垂直间距。在父元素上使用flex布局，让所有子元素实现了垂直居中，并用justify-content属性进行水平居中的间距调整。

综上所述，CSS中有很多不同的水平垂直居中的方案，每种方案都有各自的使用场景。而在应对不同的布局需求时，flexbox布局是一种十分灵活方便的解决方案。