CSS 布局 - 水平 & 垂直对齐,全面的水平垂直居中方案：
一、水平垂直居中对齐
居中效果主要用途在于
① 元素框内的文本，图像居中，使用text-align，vertical-align，line-height等达到效果
② 布局时的div框水平垂直居中，使用margin，position等达到效果，
二、文本水平垂直居中，
1、文本水平居中
代码：
text-align：center
<style>div {width: 500px;height: 300px;border: 1px solid red;}p {width: 400px;height: 50px;border: 1px solid black;text-align: center;}</style></head><body><div><p>我是liuxmoo！</p></div></body>
结果展示：
p用了text-align：center，可以让文本在p元素框的水平居中位置
当然也可以在父元素中设置text-align：center，这个属性是会继承的，子元素会继承到父元素的效果。
2、文本垂直居中，
文本的垂直居中属性：vertical-align ，这个属性只能用于行内元素、表格单元格table-cell的垂直居中，
用在块级元素并没有效果。
如下代码不能垂直居中：
<style>div {width: 500px;height: 300px;border: 1px solid red;}p {width: 400px;height: 50px;border: 1px solid black;text-align: center;vertical-align: middle;}</style></head><body><div><p>我是liuxmoo！</p></div></body>
结果展示：
文本没有在p元素中垂直居中，
那么如何设置垂直居中的呢？
①单行文本使用line-height=height的值来 达到垂直居中效果。
②也可以使用display将元素变为【行内元素或者是单元格】来 联合使用vertical-align 达到垂直居中
③当然还可以用padding值来修改上下填充来修改，但是这个不现实，不推荐使用！
①单行元素line-height方法垂直居中
<style>div {width: 500px;height: 300px;border: 1px solid red;}p {width: 400px;height: 50px;border: 1px solid black;text-align: center;line-height: 50px;}</style></head><body><div><p>我是liuxmoo！</p></div></body>
结果展示：
②可以使用display将元素变为行内元素或者是单元格来 联合使用vertical-align，联合display达到效果
（这个办法单行多行都可以达到效果，但是会改变父元素的padding，因为这个方法为了不影响父元素的padding，还要给父元素重新设置padding值。）
代码如下：
<style>div {width: 500px;height: 300px;border: 1px solid red;}p {width: 400px;height: 100px;border: 1px solid black;text-align: center;display: table-cell;vertical-align: middle;}</style></head><body><div><p>我是liuxmoo！你好呀！你好呀！你好呀！你好呀你好呀！你好呀！你好呀！你好呀！你好呀！</p></div></body>
结果展示：
三、布局时的水平垂直居中（设置块级元素框对于父元素的居中对齐），
1、块状元素水平居中，
①元素左右外边距设置为auto（根据浏览器来自适应）。
②元素定位position结合margin
③块状元素的水平居中，子元素使用display：inline-block，与父元素使用text-align：center联合（单块多块均可）
④块状元素的水平居中，子元素使用display：inline-flex，与父元素使用text-align：center联合（单块多块均可）
方法①：元素左右外边距设置为auto。
代码：
<style>div {width: 100%;height: 300px;border: 1px solid red;text-align: center;}p {width: 80%;height: 100px;border: 1px solid black;margin: 0px auto;}</style></head><body><div><p>我是内容，我是内容</p></div></body>
结果展示：
方法②元素定位position结合margin
需要给父元素设置相对定位，
代码：
<style>div {width: 100%;height: 300px;border: 1px solid red;text-align: center;position: relative;}p {width: 80%;height: 100px;border: 1px solid black;position: absolute;left: 50%;margin-left: -40%;}</style></head><body><div><p>我是内容，我是内容</p></div></body>
结果：
方法③块状元素的水平居中，display：inline-block，与text-align联合
代码如下
<style>div {width: 100%;height: 300px;border: 1px solid red;text-align: center;}p {width: 40%;height: 100px;border: 1px solid black;display: inline-block;}</style></head><body><div><p>我是内容1，我是内容1</p><p>我是内容2，我是内容2</p></div></body>
结果展示：
方法④块状元素的水平居中，display：flex，与text-align联合
代码如下
<style>div {width: 100%;height: 300px;border: 1px solid red;text-align: center;}p {width: 40%;height: 100px;border: 1px solid black;display: inline-flex;}</style></head><body><div><p>我是内容1，我是内容1</p><p>我是内容2，我是内容2</p></div></body>
结果展示：
2、块状元素垂直居中，
①已知高度height，使用position绝对定位，与margin：负外边距 联合
利用绝对定位，将元素的top和left属性都设为50%，再利用margin负边距（值为高的一半），将元素回拉它本身高宽的一半，
实现垂直居中。父元素需要设置position相对定位
②未知高度height，使用position绝对定位，与margin：auto 自适应外边距距 联合
利用绝对定位，将元素的四边属性，top，bottom，设置为0 , margin：auto，实现垂直居中。
父元素需要设置position相对定位
③父元素设置
方法①：
代码：
<style>div {width: 100%;height: 300px;border: 1px solid red;position: relative;}p {width: 40%;height: 100px;border: 1px solid black;position: absolute;top: 50%;margin-top: -50px;}</style></head><body><div><p>我是内容1，我是内容1</p></div></body>
结果展示：
方法②：
代码：
<style>div {width: 100%;height: 300px;border: 1px solid red;position: relative;}p {width: 40%;height: 100px;/* 假设我们并不知道高度，这里是为了看效果给出高度 */border: 1px solid black;position: absolute;top: 0;bottom: 0;margin: auto;}</style></head><body><div><p>我是内容1，我是内容1</p></div></body>
结果展示：
四、元素水平&垂直居中！！！！！
水平垂直都居中 是 将前面 水平居中结合垂直居中方法
①父级容器设置为display:table-cell，配合text-align:center和vertical-align:middle即可以实现水平垂直居中。
子元素（需要居中的元素）设置为display：inline，或者是display：inline-block，具体根据直接需要而定，
②父级容器设置为display:table-cell，配合text-align:center和vertical-align:middle即可以实现水平垂直居中。
子元素（需要居中的元素）设置为display：inline-flex，具体根据直接需要而定，
（有兼容性问题，不兼容的浏览器还需要做前锥设置， 不使用这个办法）
② 父级容器设置为display:flex，配合text-align:center和justify-content:center即可以实现水平垂直居中。
③已知宽度高度，利用绝对定位，top，left，都设置为50% , 联合margin：负边距（各为宽高一半），实现垂直居中。
父元素需要设置position相对定位
④未知宽度高度，利用绝对定位，将元素的四边属性，top，right，bottom，left，都设置为0 , margin：auto，实现垂直居中。
父元素需要设置position相对定位
⑤未知宽度高度，利用绝对定位，top，left，都设置为50% ,联合css3中的transform：translate（-50%，-50%），实现垂直居中。
父元素需要设置position相对定位 【有兼容性问题，只是设置transform：translate（-50%，-50%）达不到效果，还需要做兼容考虑】
方法1：代码如下，结果不展示：
<style>div {width: 100%;height: 300px;border: 1px solid red;display: table-cell;text-align: center;vertical-align: middle;}p {width: 40%;height: 100px;border: 1px solid black;display: inline-block;}</style></head><body><div><p>我是内容1，我是内容1</p></div></body>
方法2：代码如下，结果不展示：
<style>div {width: 100%;height: 300px;border: 1px solid red;display: table-cell;text-align: center;vertical-align: middle;}p {width: 40%;height: 100px;border: 1px solid black;display: inline-flex;}</style></head><body><div><p>我是内容1，我是内容1</p></div></body>
<style>div {width: 100%;height: 300px;border: 1px solid red;display: flex;justify-content: center;align-items: center;}p {width: 40%;height: 100px;border: 1px solid black;}</style></head><body><div><p>我是内容1，我是内容1</p><p>我是内容2，我是内容2</p></div></body>
方法3：代码如下，结果不展示：
<style>div {width: 100%;height: 300px;border: 1px solid red;position: relative;}p {width: 40%;height: 100px;border: 1px solid black;position: absolute;top: 50%;left: 50%;margin-left: -20%;margin-top: -50px;}</style></head><body><div><p>我是内容1，我是内容1</p></div></body>
方法4：代码如下，结果不展示：
<style>div {width: 100%;height: 300px;border: 1px solid red;position: relative;}p {width: 40%;height: 100px;border: 1px solid black;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;}</style></head><body><div><p>我是内容1，我是内容1</p></div></body>
