方法1: text-aligin:center+ vertical-align:middle
条件： 父容器display: table-cell,子元素display不限制；
圣杯布局
居中：
居中分为两种情况：
- 行内元素的居中
- 块级元素居中
- 定宽的块级元素居中
- 不定宽的块级元素居中
行内元素的居中
文字或者img等行内元素的居中，可以使用<text-align>属性，它用来定义行内元素如何相对于它的块父元素对齐，text-align不控制块父元素自身的对齐，只控制它的行内内容的对齐方式。
demo1
注意事项：
- 由于行内元素不换行的特点，所以父级块元素有多个子元素时(特别是一个文字，一个图片时)，看起来并不居中。
demo2 - text-align具有继承性质，所以当父级元素里面有一个块元素，且该块元素未设置宽度时，开起来就像该块元素实现了居中，然而当我们给该块级元素设置了宽度后，就会发现它无法实现相对于父元素的居中。
demo3
块级元素的居中 - 确定宽度
margin: 0 auto;
