通过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参考手册
可以使用“text-align:center”是文本居中。
1、新建html文档，在body标签中添加div标签，然后在div标签中添加文字：
2、为div标签设置宽高和边框css样式，这时默认情况下文字靠左对齐：
3、为div添加“text-align:center”，其中“text-align”指的是文本对齐方式，“center”指的是居中对齐，这时文本就会居中对齐：
1、首先新建一个html文件，命名为test.html，在test.html文件内，在div内，使用p标签创建一行文字，用于测试。
2、然后在test.html文件内，设置div标签的class属性为mydiv。
3、接着在css标签内，通过class设置div标签的样式，定义它宽度为200px，高度为100px，背景颜色为灰色。
4、在css标签内，再使用text-align属性设置div里面内容的居中方式，例如，这时设置为center居中方式。
5、最后在浏览器打开test.html文件，查看实现的效果，在css中让div中的P标签居中就完成了。
