这是我参与更文挑战的第9天，活动详情查看 更文挑战

居中是我们开发的过程中经常会用到的，水平居中，垂直居中，宽高固定，宽高不固定等，不一样的情况，实现的方法也不同，本文主要对各种情况的居中做一个完整的汇总。

水平居中

inline和inline-*类

 .inline-level-center{
      text-align: center;
  }
复制代码

注意：居中类是写在父元素上

  <div class="box inline-level-center">
    <span>inline元素水平居中</span>
  <div>  
复制代码

块级元素

.block-level-center{
      margin: 0 auto;
  }
复制代码

注意：居中类是写在自己身上

<div class="box">
   <div class="block-box block-level-center">block元素水平居中</div>
<div>
复制代码

多个块级元素

如果有多个块级元素，需要水平连续居中

方式一

把所有块级元素变成内联元素，然后使用内联元素居中方式即可

.inline {
    display: inline-block;
}
.inline-level-center {
    text-align: center;
}
复制代码

<div class="box inline-level-center">
    <div class="small-box1 inline">方块1</div>
    <div class="small-box2 inline">方块2</div>
    <div class="small-box3 inline">方块3</div>
</div>
复制代码

方式二

使用弹性布局来实现

.flex-level-center {
    display: flex;
    justify-content: center;
}
复制代码

<div class="box flex-level-center">
   <div class="small-box1">方块1</div>
   <div class="small-box2">方块2</div>
   <div class="small-box3">方块3</div>
</div>
复制代码

其他

如果有多个块级元素，想要纵向居中,直接使用块级元素居中方式即可

 .block-level-center{
        margin: 0 auto;
   }

复制代码

<div class="box">
    <div class="small-box1 block-level-center">方块1</div>
    <div class="small-box2 block-level-center">方块2</div>
    <div class="small-box3 block-level-center">方块3</div>
<div>
复制代码

垂直居中

inline和inline-*类

单行

如果只有一行，并且不需要换行，可以使用line-height来实现

.center-single-row {
    line-height: 200px;
    white-space: nowrap;
}

复制代码

<div class="box center-single-row">
  <span>inline元素单行垂直居中</span>
</div>
复制代码

注：如果有换行，这个方法就不适用了，否则会变成这个样子

多行

如果是想要多行垂直居中，可以用弹性布局来实现

  .center-multi-row {
    display: flex;;
    flex-direction: column;
    justify-content: center;
  }
复制代码

<div class="box center-multi-row">
   <span>inline元素多行<br/>垂直居</span>
</div>
复制代码

块级元素

高度已知

假设已知正方形高度为50px, 且padding为0。

 .parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    height: 50px;
    margin-top: -25px;
}
复制代码

<div class="box parent">
  <div class="small-box1 child">方块1</div>
</div>
复制代码

假设已知正方形高度为50px, 且padding不为0，没有使用box-sizing: border-box，则需要把padding的大小也计算进去;

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    height: 50px;
    padding: 20px;
    margin-top: -45px;
}
复制代码

高度未知

可以利用transform属性来处理

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
复制代码

<div class="box parent">
  <div class="small-box1 child">方块1</div>
</div>
复制代码

不管高度

不论是否知道高度，都可以使用弹性布局实现

.flex-vertically-center{
    display: flex;
    align-items: center;
}
复制代码

<div class="box flex-vertically-center">
  <div class="small-box1 child">方块1</div>
</div>
复制代码

水平垂直居中

固定宽高

绝对定位在 50% / 50% 之后,使用等于该宽度和高度一半的负边距(注意有padding，要把padding算进去)

.parent {
    position: relative;
}

.child {
    background: #99CCFF;
    width: 50px;
    height: 50px;
    padding: 20px;

    position: absolute;
    top: 50%;
    left: 50%;

    margin: -45px 0 0 -45px;
}
复制代码

<div class="box parent">
  <div class="child">方块1</div>
</div>

复制代码

宽高未知

利用transform元素即可

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
复制代码

使用弹性布局flex处理（无需关注宽高）

不论是否知道宽高，都可使用

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
复制代码

<div class="small-box1">方块1</div>
复制代码

使用网格grid处理（无需关注宽高）

不论是否知道宽高，都可使用

.parent {
    display: grid;
}
.grid-center {
    margin: auto;
}
复制代码

<div class="box parent">
  <div class="small-box1 grid-center">方块1</div>
</div>
复制代码

---

引用参考：Centering in CSS: A Complete Guide

小可爱看完就点个赞再走吧！???