HTML中实现子容器垂直居中的几种方式

Posted 2020-06-14

  年前前端圈蛮热闹的，大家撕的挺欢的，阿当想说的并不是固步自封，抵制学习新东西，而是想说要夯实基础，然后对框架有甄别能力的基础上再去有选择的学习。归根结底还是要掌握好根本，也就是道，其余的工具都不过是术，得道了，术这些东西自然手到擒来。好了，胡扯打住。阿当说区别真前端和伪前端其中一点就是能说出几种html元素的垂直居中方式。

  那我在这里总结一下我get的几种方式。

  代码结构如下，父容器，子容器宽高不确定。

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

一、实现子容器水平居中的几种方式：

  1. 子容器.child设置display: inline-block; 父容器设置text-align: center。这种方法兼容性好，可以做一下hack处理来实现对IE6,7的兼容，子容器 _display: inline; _zoom: 1;

  2. 利用table元素特性。子容器.child{display: table; margin: 0 auto;}。

  3. 利用定位，即.parent{position: relative}; .child{position: absolute; left: 50%; transform: translateX(-50%)}。

这种方法兼容性较差，IE9以上支持, IE9需加私有前缀-ms- ( http://caniuse.com/#search=transform )

  4. 利用弹性盒子布局。父容器display: flex; justify-content: center。兼容性比较差，IE10，IE11对弹性布局都是部分支持，IE10需加私有前缀。

 

二、实现子容器的垂直居中的几种方式：

  1. 父容器display: table-cell; vertical-align: middle。

  2. 父容器position: relative; 子容器position: absolute; top: 50%; transform: translateY(-50%);

  3. 父容器，display: flex; align-items: center。

 

综上，实现子容器水平、垂直居中对齐的方式有（父容器，子容器宽高不确定。）：

  1. 父容器.parent{text-align: center; display: table-cell; vertiacal-align: middle;}。 子容器.child{display: inline-block;}

  2. 利用定位。父容器.parent{position: relative;} 子容器.child{position: absolute; top: 50%, left: 50%; transform: translate(-50%, -50%); }

  3. 利用弹性布局。父容器display: flex; justify-content: center; align-items: center;