css中div垂直居中的方法。

覆雪蓝枫

2019-06-27

利用绝对定位实现的居中

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style type="text/css">
            *{
                padding: 0px;
                margin: 0px;
            }
            body {
                height: 100%;
                overflow: hidden;
            }
            .father{
                position: absolute;
                height: 500px;
                width: 100%;
                background-color:#2AABD2;
            }
            .children{
                position: absolute;
                top: 50%;
                left: 50%;
                background-color: red;
                width: 100px; 
                height: 100px;
                margin: -50px 0 0 -50px;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="children">
            </div>
        </div>
    </body>
</html>

效果图如下：
css中div垂直居中的方法。

利用flex垂直居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style type="text/css">
            *{
                padding: 0px;
                margin: 0px;
            }
            body {
                height: 100%;
                overflow: hidden;
            }
            .father{
                height: 500px;
                width: 100%;
                background-color:#2AABD2;
                display: flex;
                justify-content: center;/*实现水平居中*/
                align-items:center; /*实现垂直居中*/
            }
            .children{
                background-color: red;
                width: 100px; 
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="children">
            </div>
        </div>
    </body>
</html>

效果图如下： css中div垂直居中的方法。

transform+relative实现的居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中</title>
        <style type="text/css">
            *{
                padding: 0px;
                margin: 0px;
            }
            body {
                height: 100%;
                overflow: hidden;
            }
            .father{
                position: absolute;
                height: 500px;
                width: 100%;
                background-color:#2AABD2;
            }
            .children
            {
                width: 300px;
                height: 150px;
                background-color: #333333;
            
                position: relative;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="children">
            </div>
        </div>
    </body>
</html>

效果图如下： css中div垂直居中的方法。
多谢@alexxxcs1提供的另一种方式(不晓得这样能否@到^_^)，嘛其实网上实现居中的方式确实很多，互相探讨加深印象。