作为前端程序员，必须要知道的CSS布局

CSS中的垂直居中问题分为元素垂直居中和文本垂直居中两种。

首先说说元素垂直居中几种实用的方法。

元素垂直居中示意图.png

1.父元素与子元素的宽高都为精确的值（这个就不说了）。
2.父元素宽高可以为百分比，子元素宽高必须为精确的值。

添加以下属性。

1.png

3.父元素与子元素的宽高都可以为百分比。

添加以下属性。

2.png

或者

3.png

4.使用Flex布局

这个太简单了，你只需要给父元素加上下面这三行就可以了。
父元素和子元素的宽高都可以为百分比。

 

4.png

再来说说文本垂直居中的几种实用方法。

文本居中示意图.png

1.容器的高度为精确的值。

这个最简单，只需要添加以下属性。

1.png

2.容器的高度为百分比。

添加以下属性。

2.png

值的注意的是，当使用独立table的时候，是无法设置border的。也就是说上面的效果图会变成下面这样。

border消失了.png

3.使用Flex！

与上面的元素垂直居中一样，文本垂直居中也能用相同的手法。
给容器加上这三行。

3.png