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

行内元素水平垂直居中

方式一:

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{
            width: 200px;
            height: 200px;
            background-color: red;
            color:#fff;
            text-align: center;
            /*line-height: 200px;*/
            display: table-cell;
            vertical-align: middle;
        }
        td{
            width: 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{
            width: 200px;
            height: 200px;
            background-color: red;
            /*position: relative;*/
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }
        /*
        .child{
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        */
        .child{
            width: 100px;
            height: 100px;
            background-color: green;
            display: inline-block;
            line-height: 100px;
        }
        td{
            width: 100px;
            height: 100px;
            background: orange;
            vertical-align: middle;
            text-align: center;
        }
        span{
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: red;
            line-height: 50px;

        }
        .wrap{
            width: 200px;
            height: 200px;
            background-color: purple;
            position: relative;
        }
        .xiongda{
            width: 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

 

posted on 2020-12-31 08:26  随风~旋  阅读(133)  评论(0)    收藏  举报

导航