CSS实现垂直水平居中的几种方式

CSS实现垂直水平居中的几种方式

初始化css:

* {
  margin: 0;
  padding: 0;
}

.container {
  background-color: #eee;
}

.box {
  background-color: pink;
  width: 300px;
  height: 300px;
}

初始化html:

<div class="container">
  <div class="box">hello world</div>
</div>

1. 利用绝对定位与transform

.container {
  position: relative;
  height: 600px;
}

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

通过绝对定位left: 50%;top: 50%;使box大致位于中心点偏右自己的半个宽度，偏下半个高度，因此，只需通过transform使其上移，左移半个自身的高度，宽度即可。

2. 利用绝对定位与margin

.container {
  position: relative;
  height: 600px;
}

.box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

利用margin: auto能在块级元素设定宽高之后自动填充剩余宽高。margin: auto自动填充触发的前提条件是元素在对应的水平或垂直方向具有自动填充特性,给box设置top:0,bottom:0,left:0,right:0即拥有了margin: auto自动填充触发的前提条件

3. 利用flex布局

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

4.利用vertical-align和line-height

.container {
  line-height: 600px;
  text-align: center;
}

.box {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  text-align: left;
}

5.利用vertical-align实现

.container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-align: center;
}

.box {
  display: inline-block;
  vertical-align: middle;
  text-align: left;
}

.container::after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

利用::after伪元素高度为100%撑开父盒子，使元素的中部与父元素box的基线往上x-height的一半对齐，因此使得父元素box前的幽灵节点水平居中，因此box设置vertical-align: middle即可垂直居中。

什么是幽灵元素？

<div class="container">
    x
  <div class="box">hello world</div>
</div>

此时x即为幽灵节点，box的基线默认与父元素的基线对齐，而父元素的基线其实就是行框盒子前的幽灵空白节点x的基线,此时如果删除字母x，container的高度不变，因为box元素的行框盒子前会产生幽灵空白节点，而幽灵空白节点依然起着x的作用。