css3总结之居中

　　居中在前端布局上很常见，也很经常使用，也是最基本的技巧。居中效果在方向控制上基本能够分解成水平居中，垂直居中和水平垂直居中。

　　针对调整的元素不一样，具体的处理方式上有些差别。这里咱们先不讲绝对定位下的居中，绝对定位下的居中方法不少，变化也多。下面讲的都是非绝对定位下的方法，原则上有两个，一个是经常使用，另一个是兼容性最好。

水平居中是居中效果中最多见的，最经常使用的方法莫过于下列两种：

HTML：

<div class="box">薛定谔的喵！</div>

一、text-align center

.box {
　　text-align: center;
}

 

二、定宽元素 margin: 0 auto;

.box {
    width: 96px;
    margin: 0 auto;  
}

结果天然不言而喻，都是居中的，

若是是对于文本的水平居中更倾向于第一点，由于在第二点上压根就很差计算文本的宽度，即便计算会有小许的偏差，虽然对文字兼容性上不是很好，却很适合于按钮或者是宽度固定的块状元素，

反过来须要说明的是第一点也不仅仅是对文字有效，而是对内联（inline-XX）元素都有效，这个咱们能够看👇下面这个栗子：

HTML:

<div class="box">
    <div class="inline-box"></div>
</div>

CSS:

.inline-box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: burlywood;
}
.box {
  text-align: center;
  width: 100%;
  height: 100px;
}

效果以下：

除了inline-box，同理inline-flex，inline-table，inline-grid都能生效，所以text-align不仅仅能够用于文本居中，同时也能用于内联元素居中。

垂直居中经常使用方法也是两种：

一、行高等高 即：line-height = height

HTML：（仍是刚刚的代码）

<div class="box">
     <div class="inline-box">薛定谔的喵！</div>
</div>

CSS：

.inline-box {
  line-height: 100px;
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: burlywood;
}
.box {
  text-align: center;
  width: 100%;
  height: 100px;
}

二、vertical-align

有些人会说这属性时好时坏，其实这属性在display为inline-block或者table-cell的元素内才会生效，这点是须要注意哒。（虽然人家名字很好听，但生效条件也蛮苛刻哒！T_T）

HTML仍是👆上面那个栗子，

CSS：

.inline-box {
  display: table-cell;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  background-color: burlywood;
}
.box {
  width: 100%;
  height: 100px;
}

 效果图以下：

若是是inline-block的条件下，这时候就须要动用黑科技（手动滑稽）了，即配合伪类实现垂直居中，效果跟👆那个图差很少。

LESS：

.inline-box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: burlywood;
  &:after {
    content: "";
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
  }
}
.box {
  text-align: center;
  width: 100%;
  height: 100px;
}

水平垂直居中也是最多见的居中，具体表如今空白的列表页，好比电商类App购物车界面，以下天猫App购物车界面，下面列举几种经常使用方法

一、盒子模型->flex-box

display为flex下：

align-items - 垂直方向

justify-content - 水平方向

display为box下：（通常要带上私有属性，如-webkit-box，-moz-box或者-ms-flexbox）

box-align - 垂直方向

box-pack - 水平方向

这个方法有不少浏览器的兼容属性，对于不一样版本的浏览器兼容属性上还有优先级，

好比有些低版本的webkit内核浏览器-webkit-box优先级就比-webkit-flex高，这个坑曾经在低版本的微信浏览器出现过。

HTML:

<div class="container">
  <div class="box">
    <div class="inline-box">薛定谔的喵！</div>
  </div>
</div>

LESS:

.inline-box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: burlywood;
  &:after {
    content: "";
    width: 0;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
  }
}
.container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;

  display: -webkit-flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;

  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
}

实现效果以下：

本质上是将一个盒子铺满屏幕，利用盒子的居中属性进行自适配居中，这样一来能够减轻计算上的工做量而效果达到最优

二、复合水平垂直居中

这里我是复用vertical-align和text-align属性，即将上述栗子.container样式调整以下，固然复用的方法还有不少。

LESS：

.container {
  height: 100vh;
  width: 100vw;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

结果天然同上述结果图。

这里咱们须要对这两种方法进行分析，这两种方案都是基于当前的界面容器的高度作的绝对居中，但缺点也有的，就是高度都是能够调整的。若是界面是要求满屏垂直居中并且界面并无高度动态变化的属性的话，能够用这两种方法。反之，则须要绝对定位属性作限制（position：absolute），绝对定位下的居中那效果就太多，这里就不赘述了。