css选择器定位 CSS中的内容垂直居中的常见的方法

行高（line-height）法

如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：

这段代码可以达到让文字在段落中垂直居中的效果。css选择器定位css选择器定位

让class选择器tab的height和line-height的高度一致就可以（适用于文本）

内边距（padding）法

另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：

这段代码的效果和line-height法差不多。

模拟表格(display:table)

将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。

html结构如下：

css代码：

绝对定位（position:absolute）

给容器设置绝对定位（position:absolute）,并且定位高度（top:50%）和margin-top为高度的一半（margin-top:-height/2）

flex布局

只需要在父元素中使用display: flex;，然后在子元素上使用margin: auto;就可以实现垂直居中了。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-75482-1.html