CSS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

inline 或者 inline-* 的元素竖直居中
可以借助 padding, line-height, vertical-align 等属性。有如下两种具体情景：

这种情况，通过给元素上下添加相同大小的 padding 值即可实现竖直居中。

<div class="container"> <p>单行文本竖直居中，添加相同的 padding-top & padding-bottom 值</p></div>body { margin: 0;}.container { background-color: #fe435e; padding: 10px;}p { margin: 0; color: #fff; /* 相同的上下 padding 值使单行文字居中 */ padding-top: 100px; padding-bottom: 100px;}


如果不想使用 padding 不方便使用 padding 时，可以通过给元素设置 line-height，使其等于父容器的高度，从而实现竖直居中。注意，此时记得要考虑父容器的 padding 和 border 带来的高度变化。

和单行文本一样，给元素上下添加相同大小的 padding 值，还是好用滴~

<div class="container"> <p> 多行文本竖直居中，给元素上下添加相同的 padding 值。<br /> 这只是另外一段无关紧要的，用来测试的废话。 </p></div>body { margin: 0;}.container { background-color: #fe435e; padding-left: 10px; padding-right: 10px;}p { width: 160px; margin: 0 auto; color: #fff; line-height: 1.5; /* 给元素上下添加相同大小的padding值 */ padding-top: 40px; padding-bottom: 40px;}

另外一种方法，是借助 table 的属性：将父容器设置成 table，需要竖直居中的元素设置为 table-cell，然后就可以使用 vertical-align 属性来居中了。

<div class="container"> <p> 多行文本竖直居中，将父容器设置为 table，需要竖直居中的元素设置为 table-cell， 然后使用 vertical-align 属性。 </p></div>body { margin: 0;}.container { background-color: #fe435e; padding-left: 20px; padding-right: 20px; height: 400px; /* 父容器设置成 table*/ display: table;}p { width: 160px; margin: 0 auto; color: #fff; line-height: 1.5; /* 需要竖直居中的元素设置为 table-cell*/ display: table-cell; vertical-align: middle;}块级元素竖直居中通常借助 绝对定位 和 translate 等手段，在已知或者未知块级元素高度时，分别使用不同的方法。1. 块级元素高度已知此时可以使用绝对定位的方法，并借助 margin 可以为负值的特性，实现绝对定位居中：/* 已知元素高度为 100px (也可以是百分比，如 80%)*/height: 100px;/* 先使用绝对定位，将元素的上边界置于竖直的中间*/position: absolute; top: 50%;/* 再使用margin-top，将元素向上移动自身高度的一半*/margin-top: -50px;

<div class="container"> <div class="v-c"> <p>使用绝对定位使元素竖直居中。</p> </div> </p></div>body { margin: 0;}.container { background-color: #fe435e; padding: 0px 20px;; height: 400px; /* 父容器需要设置position, 使需要竖直居中的元素相对父容器进行绝对定位*/ position: relative;}.v-c { width: 400px; padding: 0 20px; padding-right: 20px; background-color: #ade4eb; height: 200px; /* 使用绝对定位使元素竖直居中*/ position: absolute; top: 50%; margin-top: -100px; /* 需要考虑 padding 和 border, 如果没有设置 box-sizing: border-box; 的话*/}p { margin: 0 auto; color: #fff; line-height: 200px;}


表示类似这段代码的使用频率简直不要太高~ 于是在使用 scss 的前提下，自己封装了一个 mixin，专门用来实现这种定位方式。

// 定义绝对定位实现水平、垂直居中@mixin abs_h_center($width) { position: absolute; width: $width; left: 50%; margin-left: -($width/2);}@mixin abs_v_center($height) { position: absolute; height: $height; top: 50%; margin-top: -($height/2);}// 然后使用的时候直接引用就可以了，这样可以避免在改动元素宽或高时，还需要同时去改 margin-left 或者 margin-top 的值.content { @include abs_v_center(200px);}块级元素高度不固定

与上面提到的使用绝对定位居中的方法原理类似，只不过在元素高度不确定的情况下，借助 translateY 使元素向上移动自身高度的一半，进而实现竖直居中。

/* 先将元素的上边界置于竖直的中间*/position: relative; top: 50%;/* 再使用 translateY，将元素向上移动自身高度的一半*/transform: translateY(-50%);

<div class="container"> <div class="v-c"> <p>使用 translateY 使元素竖直居中。</p> </div> </p></div>body { margin: 0;}.container { background-color: #fe435e; padding: 0px 20px;; height: 400px;}.v-c { width: 400px; padding: 0 20px; padding-right: 20px; background-color: #ade4eb; /* 使用 translateY，使元素竖直居中*/ position: relative; top: 50%; transform: translateY(-50%);}p { margin: 0 auto; color: #fff; line-height: 200px;}