Css 几种垂直居中方式

【css基础】10种方法告诉你如何让css实现元素或者盒子水平垂直居中（css水平垂直居中）

初始

<style>
  .a {
    width: 600px;
    height: 600px;
    background-color: blanchedalmond;
  }

  .b {
    width: 150px;
    height: 150px;
    background-color: cornflowerblue;
  }
</style>

<div class="outer a">
  <div class="inner b"></div>
</div>

before

after:

1

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

2

探秘 flex 上下文中神奇的自动 margin

传统的 display: block BFC（块格式化上下文）下，为什么 margin: auto 在水平方向可以居中元素在垂直方向却不行

margin:0 auto 可以 对左右起作用

但是如果我们想让元素相对父元素垂直居中的话，使用 margin: auto 0是不生效的

在块格式化上下文中，如果 margin-left 和 margin-right 都是 auto，则它们的表达值相等，从而导致元素的水平居中。( 这里的计算值为元素剩余可用剩余空间的一半)

而如果 margin-top 和 margin-bottom 都是 auto，则他们的值都为 0，当然也就无法造成垂直方向上的居中

这里要使单个元素使用 margin: auto 在垂直方向上能够居中元素，需要让该元素处于 FFC(flex formatting context)，或者 GFC(grid formatting context) 上下文中，也就是这些取值中：

{
    display: flex;
    display: inline-flex;
    display: grid;
    display: inline-grid;
}

在 flex 格式化上下文中，设置了 margin: auto 的元素，在通过 justify-content和 align-self 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去，即 margin auto 的生效不仅是水平方向，垂直方向也会自动去分配这个剩余空间。

.outer{
  display: flex;
}

.inner {
  margin: auto;
}

3

.outer {
  display: flex;
}

.inner {
  /* 独立出自己的样式，脱离父亲对自己的控制 */
  /* 居中对齐弹性对象元素内的某个项 */
  align-self: center;
  margin: auto
}

4

.outer{
  display: grid;
}

.inner {
  margin: auto;
}

5

.outer {
  display: grid;
}

.inner {
  /* 水平 */
  justify-self: center;
  /* 垂直 */
  align-self: center;
}

6

.outer {
  position: relative;
}

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

7

.outer {
  position: relative;
}

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

8

.outer {
  display: table-cell;
  vertical-align: middle;
  /* 定义行内内容（例如文字）如何相对它的块父元素对齐 */
  text-align: center;
}

.inner{
  display: inline-block;
}

文字居中

<style>
  .a {
    width: 600px;
    height: 600px;
    background-color: blanchedalmond;
  }

  .outer{
    /* 水平居中 */
    text-align: center;
    line-height: 600px;
  }

</style>

<div class="outer a">
  l am text
</div>