水平垂直居中，利与弊的抉择

水平垂直居中，顾名思义，就是让一个元素在水平和垂直方向上都处于居中位置。这在网页设计中是一个非常常见的需求，比如网页的标题、正文内容、按钮等等。

有许许多多的实现水平垂直居中的方法，通过修改 CSS 中的属性值即可实现，其中有些方法有着悠久的历史。令人惊讶的是，在实际项目中却经常出现居中布局的错误应用。这显然是个问题，而且需要付出一些代价。

技术指南：

技巧一：浮动技巧

<div class="container">
  <div class="item">内容</div>
</div>

.container {
  text-align: center;
}

.item {
  float: left;
  width: 200px;
  margin: 0 auto;
}

这种技巧非常古老，在没有 Flexbox 和 Grid 布局之前，这种方法非常流行。因为使用浮动能够让元素脱离文档流，实现水平居中的效果。在使用时，需要让父容器设置 text-align 属性为 center，然后再让浮动元素的 margin 属性设置为 0 auto，这样浮动元素就会在水平方向上居中。

这种方法的优点是兼容性好，缺点是使用浮动元素可能会影响页面布局，而且不适合用于垂直居中。

技巧二：flex 居中法

<div class="container">
  <div class="item">内容</div>
</div>

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

.item {
  width: 200px;
}

这种技巧使用 Flexbox 布局来实现水平垂直居中。首先，让父容器设置 display 属性为 flex，然后再让子元素设置 justify-content 和 align-items 属性为 center，这样子元素就会在水平和垂直方向上居中。

这种方法的优点是兼容性好，而且能够同时实现水平和垂直居中。缺点是需要浏览器支持 Flexbox 布局。

技巧三：绝对定位技巧

<div class="container">
  <div class="item">内容</div>
</div>

.container {
  position: relative;
}

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

这种技巧使用绝对定位来实现水平垂直居中。首先，让父容器设置 position 属性为 relative，然后再让子元素设置 position 属性为 absolute，并设置 top 和 left 属性为 50%，然后使用 transform 属性将子元素向左和向上平移 50%，这样子元素就会在水平和垂直方向上居中。

这种方法的优点是兼容性好，而且可以实现精确定位。缺点是需要计算子元素的偏移量，而且不适合用于自适应布局。

当然，除了上面三种方法之外，还有很多其他的方法可以实现水平垂直居中，比如使用 margin、padding 或者 line-height 属性等。

然而，在这篇文章中，我们将重点讨论上面提到的三种方法。这些方法是比较常用的，而且也比较容易理解。