CSS里面行内元素和块元素的水平和垂直居中

    <div id="f1" style="text-align: center;width: 600px;height: 300px;background: red;margin: 10px">
        <span id="s1">我是div套span，水平居中使用 text-align: center</span>
    </div>

    <span id="f2" style="text-align: center;width: 600px;height: 300px;background: red;display: block;margin: 10px">
        <span id="s2">我是span套span，水平居中使用display: block把span转成块元素,然后加上 text-align: center</span>
    </span>

    <div id="f3" style="text-align: center;width: 600px;height: 300px;background: red;margin: 10px;">
        <!-- div定宽-->
        <div id="s3" style="width: 600px;display: inline">我是div套div，水平居中时按照内部元素是否有宽度来设置居中方法: 1：设置宽度(设置父元素的text-align: center，设置子元素的display: inline)</div>
    </div>

    <div id="f4" style="text-align: center;width: 600px;height: 300px;background: red;margin: 10px;">
        <!-- div不定宽-->
        <div id="s4">我是div套div，水平居中时按照内部元素是否有宽度来设置宽度:  2：没有设置宽度(设置父元素的text-align: center)</div>
    </div>

    <!-- 垂直居中 -->
    <div style="width: 200px;height: 200px;vertical-align: middle;background: blue;display: table-cell">
        <span style="margin: 0 auto">我是div套span,垂直居中多行行数据的情况：父元素中配置display: table-cell，子元素中配置margin: 0 auto</span>
    </div>
<br>
    <div style="width: 200px;height: 200px;vertical-align: middle;background: blue;display: table-cell;margin: 1px">
        <div style="margin: 0 auto">我是div套div,垂直居中多行行数据的情况：父元素中配置display: table-cell，子元素中配置margin: 0 auto</div>
    </div>