行内元素与块元素的水平垂直居中

行内元素水平垂直居中

方式一:

text-align: center;

line-height: 200px;

方式二:

转换成

text-align: center;

display: table-cell;

vertical-align: middle;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>行内元素水平垂直居中</title>
    <style type="text/css">
        .box{
             200px;
            height: 200px;
            background-color: red;
            color:#fff;
            text-align: center;
            /*line-height: 200px;*/
            display: table-cell;
            vertical-align: middle;
        }
        td{
             100px;
            height: 100px;
            background-color: green;
            text-align: center;

            /* 默认垂直方向局中 */
            /*vertical-align: middle;*/
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- <span>MJJ</span>在此位置等同于MJJ -->
        <span>MJJ</span>
    </div>
    <!-- <table>
        <th>
            <td>Mjj</td>
        </th>
    </table> -->
</body>
</html>

View Code

块元素水平垂直居中

纯定位重点

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>块级元素水平垂直居中</title>
    <style type="text/css">
        .box{
             200px;
            height: 200px;
            background-color: red;
            /*position: relative;*/
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        /*
        .child{
             100px;
            height: 100px;
            background-color: green;
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        */
        .child{
             100px;
            height: 100px;
            background-color: green;
            display: inline-block;
            line-height: 100px;
        }
        td{
             100px;
            height: 100px;
            background: orange;
            vertical-align: middle;
            text-align: center;
        }
        span{
            display: inline-block;
             50px;
            height: 50px;
            background-color: red;
            line-height: 50px;

        }
        .wrap{
             200px;
            height: 200px;
            background-color: purple;
            position: relative;
        }
        .xiongda{
             100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }
    </style>
</head>
<body>
    <!-- positon+margin -->
    <div class="box">
        <div class="child">我是中间</div>
    </div>
    <!-- display:table-cell; -->
    <table>
        <th>
            <td>
                <span>MJJ</span>
            </td>
        </th>
    </table>
    
    <!-- 纯定位 -->
    <div class="wrap">
        <div class="xiongda"></div>
    </div>

</body>
</html>

View Code