1：用inline-block和vertical-align来实现居中：适用于未知宽高的情况

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #container{
                text-align: center;
                height: 400px;
                background: #4dc71f;
            }
            #container:before{
                content: "";
                height: 100%;
                display: inline-block;
                vertical-align: middle;
                margin-right: -0.25em;
            }
            #center-div{
                display: inline-block;
                vertical-align: middle;
                background: #2aabd2;

            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="center-div">
                <img src="erweima.png" height="100" width="100">
            </div>
        </div>
    </body>
</html>

2：用相对绝对定位和负边距实现垂直水平居中：适用于宽高已知

3：利用绝对定位来实现居中：适用于宽高已知

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #container{
                text-align: center;
                height: 400px;
                background: #4dc71f;
                position: relative;
            }
            #center-div{
                position: absolute;
                margin: auto;
                top: 0;
                right: 0;
                left:0;
                bottom: 0;
                width: 200px;
                height: 200px;
                background: #2b669a;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="center-div">
                <img src="erweima.png" height="100%" width="100%">
            </div>
        </div>
    </body>
</html>

4：使用table-cell和inline-block实现居中：适用于宽高未知的情况

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #container{
                display: table-cell;
                text-align: center;
                vertical-align: middle;
                height: 300px;
                background: #ccc;
            }
            #center-div{
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="center-div">
                <img src="erweima.png" height="100" width="100">
            </div>
        </div>
    </body>
</html>

5：用CSS3中的transform来实现居中：适用于未知宽高的情况

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #container{
             position: relative;
                height: 200px;
                background: #333;
            }
            #center-div{
                position: absolute;
                top:50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="center-div">
                <img src="erweima.png" height="100" width="100">
            </div>
        </div>
    </body>
</html>

6：用Flexbox布局来实现居中，但是要注意兼容性：适用于宽高未知的情况

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            #p_2{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 200px;
                height: 200px;
                background: #009f95;
            }
        </style>
    </head>
    <body>
        <div id="p_2">
            <div id="c_2">
                <img src="erweima.png" height="100" width="100">
            </div>
        </div>
    </body>
</html>

 

版权声明：本文为moumou0213原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/moumou0213/p/6472402.html