如何让一个div元素上下左右居中?

1. 绝对定位+margin:auto的方式

<!DOCTYPE html>
<html>
    <head>
        <style>
            .parent {
                width: 200px;
                height: 200px;
                background-color: rgba(255,0,0,1);
                position: relative;
            }
            .child {
                width: 50%;
                height: 50%;
                background-color: rgba(0,255,0,1);
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child"></div>
        </div>
    </body>
</html>

2. 绝对定位+transform:translate(-50%, -50%)的方式

<!DOCTYPE html>
<html>
    <head>
        <style>
            .parent {
                width: 200px;
                height: 200px;
                background-color: rgba(255,0,0,1);
                position: relative;
            }
            .child {
                width: 50%;
                height: 50%;
                background-color: rgba(0,255,0,1);
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child"></div>
        </div>
    </body>
</html>

3. 绝对定位+设置左和上的外边距（需要知道子块宽高具体值）的方式

<!DOCTYPE html>
<html>
    <head>
        <style>
            .parent {
                width: 200px;
                height: 200px;
                background-color: rgba(255,0,0,1);
                position: relative;
            }
            .child {
                width: 100px;
                height: 100px;
                background-color: rgba(0,255,0,1);
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -50px;
                margin-left: -50px;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child"></div>
        </div>
    </body>
</html>

4. 父块display: table-cell + vertical-align + 子块margin的方式

<!DOCTYPE html>
<html>
    <head>
        <style>
            .parent {
                width: 200px;
                height: 200px;
                background-color: rgba(255,0,0,1);
                display: table-cell;
                vertical-align: middle;
            }
            .child {
                width: 50%;
                height: 50%;
                background-color: rgba(0,255,0,1);
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child"></div>
        </div>
    </body>
</html>

5. flex布局方式

<!DOCTYPE html>
<html>
    <head>
        <style>
            .parent {
                width: 200px;
                height: 200px;
                background-color: rgba(255,0,0,1);
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .child {
                width: 50%;
                height: 50%;
                background-color: rgba(0,255,0,1);
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child"></div>
        </div>
    </body>
</html>

以上2,4,5方式，注意浏览器版本，较老版本浏览器可能不兼容。

注：以上，如有不合理之处，还请帮忙指出，大家一起交流学习~

知秋君

相关推荐