CSS设置垂直居中 

设置垂直居中通常有两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。

父元素高度确定的单行文本设置垂直居中

通过设置父元素的height 和 line-height 的值一致来实现。

HTML代码

<body>
    <div>
        <span>今天星期四</span>
    </div>
</body>

CSS代码

<style type="text/css">
    div {
        height: 100px;
        line-height: 100px;
    }
</style>

父元素高度确定的多行文本设置垂直居中方法一

插入table(包括tbody，tr，td标签)，同时设置vertical-align: middle;

HTML代码

<body>
    <table>
        <tbody>
            <tr>
                <td>
                    <div>
                        <p>第一行</p>
                        <p>第二行</p>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</body>

CSS代码

<style type="text/css">
    table td {
        height: 100px;
        background-color: #666;
        vertical-align: middle; /*td标签默认设置了该属性，这里实际可以不用显式的设置*/
    }
</style>

父元素高度确定的多行文本设置垂直居中方法二

可以设置块状元素的display为table-cell，激活vertical-align属性。

HTML代码

<body>
    <div id="container">
        <div>
            <p>内容1</p>
            <p>内容2</p>
            <p>内容3</p>
        </div>
    </div>
</body>

CSS代码

<style type="text/css">
    #container {
        height: 300px;
        background-color: #666;
        display: table-cell; /*IE8及Chrome，Firefox支持*/
        vertical-align: middle; /*IE8及Chrome，Firefox支持*/
    }
</style>
posted @ 2021-07-22 22:18  温茶又折花  阅读(133)  评论(0)  编辑  收藏  举报