CSS水平居中+垂直居中+水平/垂直居中的方法

1，水平居中
1.1 行内元素
1.2 块级元素
首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 :text‐align: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background‐color: skyblue;
        text‐align: center;
       }
</style>
 
<div id="father">
    <span id="son">我是行内元素</span>
</div>

如果不是，则先将其父元素设置为块级元素，再给父元素设置:
text‐align: center;

<style>
    #father {
        display: block;
        width: 500px;
        height: 300px;
        background‐color: skyblue;
        text‐align: center;
       }
</style>
 
<span id="father">
    <span id="son">我是行内元素</span>
</span>

2，垂直居中
1.1 单行的行内元素
1.2 多行的行内元素
1.3 块级元素

3,水平垂直居中
3.1已知高度和宽度的元素
3.2未知高度和宽度的元素

详细介绍请看：

http://www.xinbiancheng.cn/qa/5f32592e5dbb8a6ce1bb9b6f.html