css3总结之居中

Posted 2021-01-01 riemann66l

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

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

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

html：

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

1、text-align center

.box {
　　text-align: center;
}

 

2、定宽元素 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不单单可以用于文本居中，同时也能用于内联元素居中。

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

1、行高等高 即：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;
}

2、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购物车界面，下面列举几种常用方法

1、盒子模型->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;
}

实现效果如下：

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

2、复合水平垂直居中

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

LESS：

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

结果自然同上述结果图。

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