CSS实现水平垂直居中

一.水平居中

1.单行的文本、inline 或 inline-block 元素

此类元素需要水平居中，则父级元素必须是块级元素(block level)，且父级元素上需要这样设置样式：

.parent {
    text-align: center;
}

2.居中div（块级元素）

方法一：
使用margin： 0 auto居中

css: 
    * {margin: 0; padding: 0;}
    .content {
        margin: 0 auto;
    	width: 100px;
    	height: 100px;
        background: pink;
    }

方式二：

对于开启定位的元素，可以通过 left 属性 和 margin 实现。

总结：开启定位 ：position: relative;，left: 50%;，margin-left 为 负的宽度的一半。

.parent {
  background: #ff8787;
}
.child {
  background: #e599f7;
  height: 300px;
  width: 300px;
  /* 开启定位 */
  position: relative;
  left: 50%;
  /* margin-left 为 负的宽度的一半 */
  margin-left: -150px;
}

方法三：
当元素开启决定定位或者固定定位时，left 属性和 right 属性一起设置就会拉伸元素的宽度，在配合 width 属性与 margin 属性就可以实现水平居中。

.parent {
  background: #ff8787;
  position: relative;
  height: 300px;
}
.child {
  background: #e599f7;
  height: 300px;
  /* 开启定位 */
  position: absolute;
  /* 水平拉满屏幕 */
  left: 0;
  right: 0;
  /* 拉满屏幕之后设置宽度，最后通过 margin 实现水平居中 */
  width: 300px;
  margin: auto;
}

方法四：
当元素开启决定定位或者固定定位时，left 属性和 transform 属性即可实现水平居中。

.parent {
  background: #ff8787;
  position: relative;
  height: 300px;
}
.child {
  background: #e599f7;
  height: 300px;
  width: 300px;
  /* 开启定位 */
  position: absolute;
  /* 该方法类似于 left 于 -margin 的用法，但是该方法不需要手动计算宽度。 */
  left: 50%;
  transform: translateX(-50%);
}

方法五：

Flex 布局:

为父元素开启 Flex 布局，通过 justify-content: center 即可实现居中布局。

.parent {
  background: #ff8787;
  height: 300px;
  /* 开启 Flex 布局 */
  display: flex;
  /* 通过 justify-content 属性实现居中 */
  justify-content: center;
}
.child {
  background: #e599f7;
  height: 300px;
  width: 300px;
  /* 或者 子元素 margin: auto*/
  margin: auto;
}

两种方法选择其一就好。

二.垂直居中

1.单行的文本、inline 或 inline-block 元素

方法一：

通过设置上下内间距一致达到垂直居中的效果：

.single-line {
    padding-top: 10px;
    padding-bottom: 10px;
}

方法二：

通过设置 height 和 line-height 一致达到垂直居中：

直接使用 line-height 等于父元素的高度

.text {
  height: 200px;
  font-size: 3rem;
  font-weight: bold;
  background-color: #ff8787;
  text-align: center;
  /* 通过 line-height 等于元素高度即可完成文字垂直居中 */
  line-height: 200px;
}

<div class="text">这是一个需要居中的测试文本</div>

2.固定宽高的块级盒子

方法一：
若元素是行内块级元素, 基本思想是子元素使用 display: inline-block, vertical-align: middle 并让父元素行高等同于高度。

.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
  /* 为父级容器设置行高 */
  line-height: 500px;
}
.child {
  width: 300px;
  height: 300px;
  /* 将子级元素设置为 inline-block 元素 */
  display: inline-block;
  /* 通过 vertical-align: middle; 实现居中 */
  vertical-align: middle;
  background-color: #91a7ff;
}


<div class="parent">
  <div class="child"></div>
</div>

方法二：
使用 position + top + height + -margin 实现垂直居中。

top: 50%; margin-top: 等于负的高度的一半 就可以实现垂直居中。

.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
  /* 为父级容器开启相对定位 */
  position: relative;
}
.child {
  width: 300px;
  height: 300px;
  background-color: #91a7ff;
  position: absolute;
  top: 50%;
  /* margin-top: 等于负高度的一半 */
  margin-top: -150px;
}

<div class="parent">
  <div class="child"></div>
</div>

方法三：
使用 position + top + bottom + height + margin 实现垂直居中。

top 和 bottom 将子元素拉伸至 100%，设置指定的高度，通过 margin:auto; 即可实现垂直居中，

.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
  /* 为父级容器开启相对定位 */
  position: relative;
}
.child {
  width: 300px;
  height: 300px;
  background-color: #91a7ff;
  position: absolute;
  /* 垂直拉满 */
  top: 0;
  bottom: 0;
  /* margin: auto 即可实现 */
  margin: auto;
}


<div class="parent">
  <div class="child"></div>
</div>

方法三：
使用 position + top + transform 实现垂直居中。

通过 top:50%; 和 translateY(-50%) 即可实现。

.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
  /* 为父级容器开启相对定位 */
  position: relative;
}
.child {
  width: 300px;
  height: 300px;
  background-color: #91a7ff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}


<div class="parent">
  <div class="child"></div>
</div>

方法四：
使用 Flex 实现垂直居中。

.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
  /* 开启 flex 布局 */
  display: flex;
  /* 方法一 */
  /* align-items: center; */
}
.child {
  /* 方法二 */
  margin: auto;
  width: 300px;
  height: 300px;
  background-color: #91a7ff;
}

三.水平垂直居中

1.行内块级水平垂直居中方案

步骤如下：

1. 容器元素行高等于容器高度
2. 通过 text-align: center; 实现水平居中
3. 将子级元素设置为水平块级元素
4. 通过 vertical-align: middle; 实现垂直居中

.parent {
  /* 1. 设置行高等于容器高度 */
  line-height: 500px;
  /* 通过 text-align: center; 实现水平居中 */
  text-align: center;
}
.child {
  /* 将子级元素设置为水平块级元素 */
  display: inline-block;
  /* 通过 vertical-align: middle; 实现垂直居中 */
  vertical-align: middle;
}

2.定位+定宽+定高实现水平垂直居中方案(一)

步骤如下：

1. 使子元素相对于容器元素定位
2. 子元素开启绝对定位
3. 设置该元素的偏移量，值为 50% 减去宽度/高度的一半

.parent {
  /* 1. 使子元素相对于本元素定位 */
  position: relative;
}
.child {
  /* 2. 开启绝对定位 */
  position: absolute;
  /* 3. 设置该元素的偏移量，值为 50%减去宽度/高度的一半 */
  left: calc(50% - 150px);
  top: calc(50% - 150px);
}

3.定位+定宽+定高实现水平垂直居中方案(二)

步骤如下：

1. 使子元素相对于容器元素定位
2. 子元素开启绝对定位
3. 设置该元素的偏移量，值为 50%
4. 通过外边距 -值 的方式将元素移动回去

.parent {
  /* 1. 使子元素相对于本元素定位 */
  position: relative;
}
.child {
  /* 2. 开启绝对定位 */
  position: absolute;
  /* 3. 设置该元素的偏移量，值为 50% */
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -150px;
}

4.定位+定宽+定高实现水平垂直居中方案(三)

步骤如下：

1. 使子元素相对于容器元素定位
2. 子元素开启绝对定位
3. 将子元素拉满整个容器
4. 通过 margin:auto 实现水平垂直居中

.parent {
  /* 1. 使子元素相对于本元素定位 */
  position: relative;
}
.child {
  /* 2. 开启绝对定位 */
  position: absolute;
  /* 3. 将子元素拉满整个容器 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 4. 通过 margin:auto 实现水平垂直居中 */
  margin: auto;
}

5.定位+transform实现水平垂直居中

步骤如下：

1. 使子元素相对于容器元素定位
2. 子元素开启绝对定位
3. 设置该元素的偏移量，值为 50%
4. 通过 translate 反向偏移的方式，实现居中

.parent {
  /* 1. 使子元素相对于本元素定位 */
  position: relative;
}
.child {
  /* 2. 开启绝对定位 */
  position: absolute;
  /* 3. 设置该元素的偏移量，值为 50%*/
  left: 50%;
  top: 50%;
  /* 通过translate反向偏移的方式，实现居中 */
  transform: translate(-50%, -50%);
}

实现原理：left 相对于父级进行左偏偏移，50% 也就是父级宽度 500px 的一半，也就是 250px; translate 同样是进行偏移，与之不同的是，该方式参照的是当前元素，X轴偏移 -50% 的话，就是 300px 的 50%，也就是 150px，最终 子元素距离父元素边距为 100px。即 100px 300px 100px 最终实现了居中。

6.Flex 方案

步骤如下：

1. 将元素设置为 Flex 布局
2. 通过 justify-content: center 以及 align-items: center 实现或者 margin: auto; 实现。

.parent {
  /* 1. 将元素设置为 Flex 布局 */
  display: flex;
  /* 2. 通过 justify-content 以及 align-items: center 实现 */
  /* justify-content: center;
  align-items: center; */
}
.child {
  /* 或者通过 margin auto 实现 */
  margin: auto;
}