居中到底有多少种方法

前言

居中能够说是网页布局中很是常见的布局了，垂直居中，水平居中，其中又分为块级元素和行内元素，没有系统的整理过还真有点搞不清楚。来看看各式各样的居中到底有多少种。

水平居中

行内元素水平居中

行内元素水平居中最多见的场景就是文字居中，最经常使用的就是对其父元素设置 text-align:center,这个方法对一下几种元素都有效：

• display:inline
• display:inline-block、
• display:inline-table
• display:inline-flex

<div class="parent">
        <a>个人博客</a>
  </div>

.parent{
      text-align:center;
  }

块级元素水平居中

1.设为行内元素使用居中

看完行内元素居中咱们很容易就会想到，能够将块级元素手动设置为行内元素，再使用text-align:center居中

<div class="parent">
     <div class="child">
          仍是个人博客
      </div>
  </div>

.parent {
  text-align: center;
}
.child {
  display: inline;
  background-color: red;
  color: white;
}

固然若是有对元素设置宽高的需求的话设置 display:inline-block 便可

2. 使用左右 margin:auto

经过将块状元素的左右 margin 设置为 auto 可使左右 margin 平分所剩下的空间，获得的效果天然就是元素水平居中了，不过前提是块状元素须要设置好宽度

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

.child {
  width: 100px;
  height: 50px;
  margin: 0 auto;
  background-color: blue;
}

经过控制台查看布局能够看到，蓝色元素左右被等宽的 margin 占据。

这种方式更合适元素独占一行的状况，由于都被 margin 占满了没法再添加其余元素了。

3.使用table+margin

使块级元素得到宽度除手动设置 width 以外，还能够经过设置 display: table。此时元素宽度为内容宽度，因此块状元素内部须要有内容，否则就会坍塌不见。一样占据一整行。

<div class="child">个人博客</div>>

.child {
  display: table;
  margin: 0 auto;
  background-color: blue;
  color: white;
}

4.使用absolute+transform

先将父元素设置为相对定位，对子元素使用绝对定位，让子元素向右移动父元素宽度的通常，而后向左移动子元素本身宽度的通常

<div class="parent">
     <div class="child">
          个人博客
      </div>
  </div>

.parent {
  position: relative;
}
.child {
  background-color: blue;
  color: white;
  left: 50%; // left 设置百分比即为父元素宽度的百分比
  transform: translateX(-50%); //translateX 百分比是本身宽度的百分比
  position: absolute;
}

这样设置的元素是脱离正常文档流的，不影响其余元素布局。可是有比较少的浏览器不支持设置 transform 属性。

5.使用flex+justify-content

这也是我使用的最多的一种居中方式了，经过使用 flex 布局 方式能够很轻松的实现水平居中，
设置 justify-content: center;便可实现子元素水平居中排列，其中 justify-content 用于设置弹性盒子元素在主轴（默认横轴）方向上的对齐方式

<div class="parent">
     <div class="child">
          个人博客
      </div>
  </div>

.parent {
  display: flex;
  justify-content: center;
}
.child {
  background-color: blue;
  color: white;
}

能够看到咱们并无设置子元素的宽度，在 flex 布局下 div 宽度自动收缩到了内容宽度，效果和使用 display: table 同样，这时一样能够经过设置 margin:0 auto 居中，可是这明显不是咱们使用 flex 布局的初衷。经过使用 flex 布局元素无需脱离正常文档流，无需独占一行。固然不可避免的会有一小部分浏览器不兼容。

6. 利用绝对定位元素自动伸缩

代码以下：

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

.parent {
  position: relative;
}
.child {
  position: absolute; /*绝对定位*/
  width: 200px;
  height: 100px;
  background: blue;
  margin: 0 auto; /*水平居中*/
  left: 0; /*此处不能省略，且为0*/
  right: 0; /*此处不能省略，且为0*/
}

多块级元素水平居中

1.使用 flex 布局

利用弹性布局(flex)，一样能够实现多块级元素水平居中。

<div class="parent">
     <div class="child">
          个人博客
      </div>
        <div class="child">
          个人博客
      </div>
        <div class="child">
          个人博客
      </div>
  </div>

.parent {
  display: flex;
  justify-content: center;
}
.child {
  background-color: blue;
  color: white;
    margin-left: 10px;// 只是为了分离开元素
}

2. 利用inline-block

将要水平排列的块状元素设为display:inline-block，而后在父级元素上设置text-align:center，达到与上面的行内元素的水平居中同样的效果。

<div class="parent">
     <div class="child">
          个人博客
      </div>
        <div class="child">
          个人博客
      </div>
        <div class="child">
          个人博客
      </div>
  </div>

.parent {
text-align: center;
}
.child {
  background-color: blue;
  color: white;
    margin-left: 10px;
    display: inline-block;
}

浮动元素水平居中

1. 定宽的非浮动元素经过设置 relative + 负margin,

原理见下图：

<div class="parent">
     <div class="child">
          个人博客
      </div>
  </div>

.child {
   background-color: blue;
  width: 100px;
  height: 50px;
  position: relative;
  left: 50%;
  margin-left: -50px;
}

注意：样式设置在浮动元素自己，父元素无需设置

2.不定宽的浮动元素经过父子容器都相对定位居中

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

.parent {
  float: left;
  position: relative;
  left: 50%;
}
.child {
  background-color: blue;
  width: 100px;
  height: 50px;
  float: left;
  position: relative;
  right: 50%;
}

能够看到 父元素组件也是偏移了位置的

3. 使用 flex 布局

flex 布局，强。这里就不赘述了，使用方法同上面同样

垂直居中

行内元素垂直居中

1. line-height = height

让父元素行高等于高度便可实现行内元素垂直居中

<div class="parent">
        <a class="child">个人博客</p>
  </div>

.parent {
  background-color: red;
  color: white;
  height: 120px;
  line-height: 120px;
}
.child {

}

效果截图：

2. 利用表布局（table）

使用表布局的 vertical-align: middle 也可实现垂直居中

.parent {
  background-color: red;
  display: table;
  height: 140px;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

块级元素垂直居中

1. absolute+负margin

在已知高度的状况下，可使用 top:50% 让元素距离顶部为父元素高度的一半，而后使用 -margin 使元素向上位移自身高度的一一半，原理其实和上文水平居中里一种同样的

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

.parent {
  position: relative;
  background-color: antiquewhite;
  height: 200px;
}
.child {
  background-color: beige;
  position: absolute;
  top: 50%;
  height: 100px;
  width: 200px;
  margin-top: -50px;
}

经过这种思想很容易想出另一种方法，那就是使用 transform 使元素位移，原理是如出一辙的，就不单独列出。

2.使用flex+align-items

使用 flex 布局，经过设置父元素的 align-items 实现子元素的垂直居中

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

.parent {
  background-color: antiquewhite;
  height: 200px;// 父元素必须有高度才能实现垂直居中
  display: flex;
  align-items: center;
}
.child {
  background-color: beige;
  height: 100px;
  width: 200px;
}

这个方法对行内元素一样有限，将 <div class="child"></div>改成 <p>个人博客</p>

水平垂直居中

1.Flex 布局

水平垂直居中就是组合使用 水平居中与垂直居中，不过要说最方便的仍是使用 flex 布局

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

.parent {
  background-color: antiquewhite;
  height: 200px;// 父元素必须有高度才能实现垂直居中
  display: flex;
  align-items: center; // 垂直居中
   justify-content: center; // 水平居中
}
.child {
  background-color: beige;
  height: 100px;
  width: 200px;
}

2.margin:auto

容器元素设为 flex 布局或是 grid 布局，子元素只要写 margin: auto 便可,不能兼容低版本的IE浏览器。

.parent {
  background-color: antiquewhite;
  height: 200px;
  display: grid;
}
.child {
  background-color: beige;
  height: 100px;
  width: 200px;
  margin: auto;
}

和 flex 布局有所不一样的是能够看到父元素被 margin 填满了

总结

各类各样的居中方案一数居然有差很少二十种，在实际开发中固然不会用到这么多，就我本身而言使用得最多的仍是 margin:auto 和 flex 布局，研究这么多的目的知识为了更加熟悉 CSS 的一些特性，好比 -margin-left 是让元素左移，而 -margin-right则会让元素右边的元素惟一，元素自己保持不动。这个特性不去研究我还真不知道。还有能够看到最方便的 flex 布局不支持比较老的浏览器，兼容性有必定问题，可是我想说的是除非你是搭建政府网站，其实不必去考虑兼容 IE6 这种老古董了。兼容不必矫正过往，这只会恶心到本身。

参考文章

• 如何居中一个元素（终结版）(部分图片摘自于此)
• Can I use
• Flex 布局教程--阮一峰
• 如何居中一个元素 (正常、绝对定位、浮动元素）
• 这15种CSS居中的方式，你都用过哪几种？