【CSS 学习总结】第九篇 - CSS 布局 - 居中布局 - 水平垂直居中布局

一，前言

上一篇，主要介绍了 5 种垂直居中效果的实现方案、原理及优缺点，主要涉及以下几个点：

• 文本、行内元素、行内块级元素的垂直居中；

• 图片的垂直居中；

• 利用table-cell，实现单个块级元素的垂直居中；

• 使用绝对定位+反向移动，实现单个块级元素的垂直居中；

• 使用flex布局，实现单个块级元素的垂直居中；

本篇，介绍 CSS 布局-居中布局-水平垂直居中布局；

二，水平垂直居中布局简介

水平垂直居中布局：指当前元素在父元素容器中，水平垂直方向都是居中显示的；

前面，介绍了实现水平居中的 5 种方案，和实现垂直居中的 5 种方法；

实现水平垂直居中效果，共有 3 种方案（5 种实现）：

• 利用table-cell实现；

• 使用position定位实现；

• 利用flex弹性布局实现；

三，利用 table-cell 实现（1 种）

原理

利用 CSS table 布局：

• 垂直方向居中：

• 父容器设置table-cell，相当于将其转化为td;

• 父容器设置vertcal-align，实现垂直方向居中对齐；

• 水平方向居中：根据内部是行内内容或块级内容采取不同的实现方式：

• 若内部是行内元素：父容器设置text-align: center控制本文在水平方向居中;

• 若内部是块级元素：子容器设置margin: 0 auto;浏览器自动计算并分配，实现水平方向居中；

示例

行内元素的水平垂直居中：

<style>.parent{  display: table-cell;  vertical-align: middle; /* 垂直方向居中*/  text-align: center; /* 行内元素水平居中 */}.child{  display: table;}</style>
<div class="parent">  <div class="child">水平垂直居中</div></div>

块级元素的水平垂直居中：

<style>.parent{  display: table-cell;  vertical-align: middle; /* 垂直方向居中*/}.child{  display: table;/* table 或 block */  margin: 0 auto; /* 块级元素水平居中 */}</style>
<div class="parent">  <div class="child">水平垂直居中</div></div>

优点

• 实现简单；

• 适用于宽高未知的场景；

• 兼容性好（需要 IE 8+）；

缺点

这种水平垂直居的实现方案，使用了text-align具有继承性；

所以，当父元素中存在文字时，默认也会是居中效果；

四，利用 position 定位实现（3 种）

原理

• 使用绝对定位：父元素设置相对定位，子元素设置绝对定位；

• 设置子元素相对父元素尺寸的top、right、bottom、left值；

• 再设置相对子元素自身尺寸的margin或transform，进行反向移动，实现水平垂直居中效果;

示例

<style>.parent{  position: relative;}.child{  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%,-50%);  /* 定宽高事，等同于margin-top：负自身宽度的 50% */  /* margin-top: -自身高度的50% */}</style>
<div class="parent">  <div class="child">水平垂直居中</div></div>

• 给父元素设置相对定位，子元素设置绝对定位；

• 为子元素设置相对父元素 top、left 各 50%

• 再反向移动，实现水平垂直居中：

• 1）自身高度、宽度各 50%；

• 2）transform 控制 X、Y 轴反向平移 50%；

组合两种效果，从而达到几何上的水平垂直居中效果；

利用定位实现水平垂直居中效果，共有 3 种方法：

• 1，方位 50% + margin 反向移动宽高 50%；

• 2，方位 50% + transform 反向移动宽高 50%；

• 3，将 4 个方位全部设置为 0，再设置margin: auto；

方法三思路说明：

• 水平方向居中： 当方位left、right同时被设置为 0 时，会自动进行拉伸；再设置margin: auto，即可实现水平居中效果；

• 垂直方向居中：方位top、bottom同时设置为 0；

优点

• 使用 margin 负值做反向移动的兼容性相对较好；

• 不管是块级还是行内元素都可以实现水平垂直居中效果；

缺点

• 代码实现较复杂，需要理解；

• 由于使用了定位，会导致脱离文档流；

• transform 的兼容性不好（需要 IE9+）

五，利用 flex 弹性布局实现（1 种）

原理

通过 CSS3 的 flex 弹性布局，控制元素水平、垂直方向居中对齐即可;

两个属性 justitfy-content、align-item效果叠加，实现水平垂直居中；

示例

<style>.parent{  display: flex;  align-items:center;    /* 垂直方向居中 */  justify-content:center;/* 水平方向居中 */  border: 1px solid red;  height: 100px;  width: 300px;
}.child{  width: 50px;  height: 40px;  border: 1px solid blue;}</style>
<div class="parent">  <div class="child">水平</div>  <div class="child">垂直</div>  <div class="child">居中</div></div>

• flex 布局，默认内部子元素的对齐方式为水平对齐；

• 水平方向，通过设置justitfy-content，控制元素水平居中;

• 垂直方向，通过设置align-item，控制子元素垂直居中;

优点

• 实现简单、功能强大；

• 支持多个子元素整体水平居中；

缺点

• 在 PC 端存在兼容性问题；

• 移动端需要 Android 4.0+；

六，结尾

本篇，主要介绍了水平垂直居中效果的实现方案（3 种方案 5 种实现）、原理及优缺点，主要涉及以下几个点：

• 利用table-cell，实现水平垂直居中效果；

• 利用position定位，实现水平垂直居中效果；

• 利用flex弹性布局，实现水平垂直居中效果；

下一篇，介绍 CSS 布局-多列布局-两列布局；