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

一，前言

上一篇，主要对 CSS 布局进行了概括性介绍，主要涉及以下几个点：

• CSS 布局简介、布局的发展历史；

• CSS 布局技巧、常见布局效果，面试题；

本篇，开始介绍 CSS 布局-居中布局-水平居中布局；

二，水平居中布局简介

水平居中布局：指子元素在父元素中，水平方向是居中显示的；

实现水平居中效果的 5 种方案：

• inline-block + text-align 属性配合使用；

• table + margin 属性配合使用；

• absolute + margin 属性配合使用；

• absolute + transform 属性配合使用；

• flex + justify-content 属性配合使用；

三，水平居中布局的实现

1，文本/行内元素/行内块级元素

原理

• text-align 的翻译是：“文字对齐”，包含：左对齐、右对齐、居中对齐；

• text-align 能够控制行内内容（如：文字、行内元素、行内块级元素），在其块级父元素中的对齐方式；

示例

<style>.parent{  text-align:center;}</style>
<div class="parent">  <div class="child">水平居中</div></div>

利用text-align属性，通过为块级容器设置text-align:center;，控制行内内容实现水平居中对齐效果；

优点

实现简单、可读性好、兼容性好；

缺点

• text-align文本对齐属性具有继承性，导致失效；

为父容器设置的文本对齐属性，将会被子元素所继承；

当子元素宽度 > 父元素宽度时，水平居中效果会出现问题；

2，单个块级元素

原理

• 当子容器定宽时，设置margin：0 auto浏览器会自动计算并均分水平方向上的剩余空间，从而达到水平居中效果；

备注：如果上下 margin 也设置为 auto，计算值将会为 0 导致失效；

示例

<style>.child{  width:100px;  margin: 0 auto;}</style>
<div class="parent">  <div class="child">水平居中</div></div>

子容器定宽，并设置 margin:0 auto;，浏览器将自动计算并均分水平方向上的剩余空间，实现水平居中效果；

优点

实现简单、可读性好、兼容性好；

缺点

• 子容器必须定宽，且不能被设置为 auto；

• 当子元素宽度 > 父元素宽度时，水平居中效果会出现问题；

3，多个块级元素

多个块级元素如何整体在父元素内水平居中？

原理

• 借助text-align属性特性：只能控制文本对齐（文字、行内元素、行内块级元素）；

• 通过display:inline-block将块级元素转为行内块，并设置text-align:center，达到子元素整体水平居中效果；

示例

<style>.parent{  text-align: center;}.child{  display: inline-block;}</style>
<div class="parent">  <div class="child">水平居中</div></div>

优点

实现简单、可读性好、兼容性好；

缺点

• 行内块元素和行内元素，会受到换行符的影响而产生默认间距；

由于将块级子元素转化成为行内块，两个行内块之间就会产生默认间距；

此时，可以通过为父元素设置font-size: 0去除这个默认间距；

但是，font-size: 0还会产生一个新的问题：子元素中的文字会因字体大小为 0 导致不显示；

所以，还需要再为子元素设置一个字体大小，才能完美解决问题；

4，任意个元素

原理

利用 flex 弹性布局，设置主轴方向上的对齐方式为居中对齐；

示例

<style>.parent{  display: flex;           /* 使用 flex 布局*/  justify-content: center; /* 设置主轴方向上的对齐方式 */}</style>
<div class="parent">  <div class="child">水平居中</div></div>

• 通过设置display: flex;，使用 flex 布局，默认水平方向排列；

• 通过设置justify-content属性，能够实现多个子元素整体在父元素内部的水平居中效果；

优点

• 实现简单、功能强大；

• 无需考虑子元素的数量；

缺点

flex 是 css3 新增的响应式布局方案，主要面向移动端，

所以 PC 端使用存在兼容问题，移动端需要 android 4.0+；

5，使用绝对定位实现

原理

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

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

• 再通过margin或transform，设置相对子元素自身尺寸的值，进行反向移动，完成水平居中效果;

备注：实现反向移动的两种方法：margin或transform；

示例

<style>.parent{  position:relative;/* 相对定位 */}.child{  position:absolute;/* 绝对定位 */  left:50%;  transform:translateX(-50%);  /* margin-left:-父元素宽度/2  */}</style>
<div class="parent">  <div class="child">水平居中</div></div>

• 为父元素添加相对参照物，为子元素设置绝对定位；

• 设置 left 方位 50%（此时并非正中间），再进行反向移动，使其在几何上正好处于正中间位置，实现水平居中效果；

反向移动的两种方法：

• 1，设置margin负值实现反向移动；

• 2，使用 CSS3 变换属性transform进行水平位移，移动距离为宽度的一半；

备注：此种水平居中方案，也是在实际项目中使用最多的一种；

优点

使用margin-left实现反向移动，兼容性好（块级、行内元素都可以实现）；

缺点

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

• 使用margin-left负值实现反向移动时，需要知道宽度值；

• 使用 CSS3 变换属性transform实现反向移动，存在兼容性要求（IE 9+）；

四，结尾

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

• 文本、行内元素、行内块级元素的水平居中；

• 单个块级元素的水平居中；

• 多个块级元素的水平居中；

• 任意数量元素的水平居中；

• 使用绝对定位+反向移动；

下一篇，介绍 CSS 布局-居中布局-垂直居中布局；