通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。因为inline-block可以兼具行内元素和块级元素的特点，能够使得元素有宽度和高度。从而在盒子内能够实现居中
通过display:flex实现CSS垂直居中的方法是给父元素display:flex而子元素align-self:center
这个跟CSS水平居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。
给父元素display:table，子元素display：table-cell的方式实现CSS垂直居中，表格也是常用的居中模式，缺点就是会对下面的元素某些样式造成一定的影响，不推荐经常使用这个方式。
先给父元素position:relative，再给子元素position:absolute，通过translateY即可定位到垂直居中的位置。这个是纵轴居中，由CSS3的新特性translate，可以改变元素在纵轴上的偏移。
设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。同样也是纵轴居中。
括展资料：
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS百度百科CSS参考手册
通常首选方法是使用 flexbox 居中内容。只需三行代码即可： display:flex ，然后使用 align-items:center 和 justify-content:center 将子元素垂直和水平居中。
如下代码：
html：
css：
使用grid(网格)与flexbox非常相似，也是一种常见的技术，尤其是布局中已经使用网格的情况下。与前一种flexbox技术的唯一区别是它显示为栅格。
如下代码：
html:
css:
使用css transform 居中元素，前提是容器元素必须设置为 position:relative ，然后子元素使用 left:50%和 top:50% 偏移子元素，最后使用 translate（-50%，-50%） 以抵消其偏移的位置。
代码如下：
html：
css：
最后，表格居中是一种旧技术，在使用旧浏览器时，您可能会喜欢这种技术。前提是容器元素设置为 display:table ，然后子元素设置为 display: table-cell ，最后使用 text-align: center 水平居住和 vertical-align: middle 垂直居中。
代码如下：
html：
css:
使用CSS将字体居中可以使用HTML中的 <center>标签，简单方便。
具体介绍CSS中Center标签定义、其使用方法及相关内容：
对浏览器支持：所有浏览器都支持 <center>标签。
定义和用法：对其所包括的文本进行水平居中。
标准属性：id, class, title, style, dir, lang, xml:lang。
事件属性：onclick, ondblclick, onmousedown, onmouseup, onmouseover,
onmousemove, onmouseout, onkeypress, onkeydown, onkeyup。
HTML 与 XHTML 之间的差异：
A、在 HTML 4.01 中，center 元素不被赞成使用。
B、在 XHTML 1.0 Strict DTD 中，center 元素不被支持。
Center标签实现字体居中案例：
<table width="400" border="0"><tr>
<td><center>表格内容1</center></td>
<td>表格内容2</td>
<td><center>表格内容3</center></td>
</tr>
<tr>
<td>表格内容4</td>
<td><center>表格内容5</center></td>
<td>表格内容6</td>
</tr>
<tr>
<td><center>表格内容7</center></td>
<td>表格内容8</td>
<td><center>表格内容9</center></td>
</tr>
</table>
Center标签实现字体居中案例效果：
附，另一种实现方法：
td{ text-align:center}
<td align="center" valign="middle">
前一个是水平居中 后一个是垂直居中
对应的css写法:
<td style="text-align:centervertical-align:middle">
提示和注释：请使 CSS 样式来居中文本！
