如何实现垂直居中

蓝zf
97 阅读8分钟

一、若.parent的height不写

  • 只需padding:10px 0;就能将.child垂直居中

二、若.parent的height写死，用以下方法实现垂直居中

  1. 用table自带功能
<body>
    <table class="parent">
        <tr>
            <td class="child">
                垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
            </td>
        </tr>
    </table>
    <script src="main.js"></script>
</body>

.parent{
    border: 1px solid blue;
    height: 600px;
}
.child{
    border: 1px solid black;
}

微信图片_20240508113326.png 2. 将div装成table（实际还是用table的自带功能）

<body>
    <div class="table">
        <div class="td">
            <div class="child">
                垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
            </div>
        </div>
    </div>
    <script src="main.js"></script>
</body>

div.table{
    display: table;/*让不是table的元素变成table*/
    border: 1px solid blue;
    height: 600px;
}
div.td{
    display: table-cell;/*让不是td的元素变成table的td*/
    vertical-align: middle;/*让内容居中*/
    border: 1px solid red;
}

微信图片_20240508114314.png 3. 用两个span包住内容，给100%的高度和inline-block，让span和内容都vertical-alian:middle;

<body>
    <div class="parent">
        <span class="before"></span><div class="child">
            垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
        </div><span class="after"></span>
    </div>
    <script src="main.js"></script>
</body>

.parent{
    border: 1px solid blue;
    height: 600px;
    text-align: center;
}
.child{
    border: 1px solid red;
    display: inline-block;
    width: 300px;
    vertical-align: middle;
}
.parent .before{
    display: inline-block;
    width: 10px;
    height: 100%;
    vertical-align: middle;
    background: green;
}
.parent .after{
    display: inline-block;
    width: 10px;
    height: 100%;
    vertical-align: middle;
    background: green;
}

微信图片_20240508121042.png 再把span的width和background删掉即可

  • 上述方法可优化成用伪类
<body>
    <div class="parent">
        <div class="child">
            垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
        </div>
    </div>
    <script src="main.js"></script>
</body>

.parent{
    border: 1px solid blue;
    height: 600px;
    text-align: center;
}
.child{
    border: 1px solid red;
    display: inline-block;
    width: 300px;
    vertical-align: middle;
}
.parent:before{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.parent:after{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

微信图片_20240508121759.png 4. 将margin-top:-50px;

<body>
    <div class="parent">
        <div class="child">
            垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
        </div>
    </div>
    <script src="main.js"></script>
</body>

.parent{
    border: 1px solid blue;
    height: 600px;
    position: relative;
}
.child{
    border: 1px solid red;
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -150px;
    height: 100px;
    margin-top: -50px;
}

微信图片_20240508122748.png 5. 将transform: translate(-50%,-50%);

<body>
    <div class="parent">
        <div class="child">
            垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
        </div>
    </div>
    <script src="main.js"></script>
</body>

.parent{
    border: 1px solid blue;
    height: 600px;
    position: relative;
}
.child{
    border: 1px solid red;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

微信图片_20240508123112.png 6. 将margin: auto;

<body>
    <div class="parent">
        <div class="child">
            垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
        </div>
    </div>
    <script src="main.js"></script>
</body>

.parent{
    border: 1px solid blue;
    height: 600px;
    position: relative;
}
.child{
    border: 1px solid red;
    position: absolute;
    width: 300px;
    height: 200px;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

微信图片_20240508123335.png 7. 用display: flex;

<body>
    <div class="parent">
        <div class="child">
            垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中
        </div>
    </div>
    <script src="main.js"></script>
</body>

.parent{
    border: 1px solid blue;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.child{
    border: 1px solid red;
    width: 300px;
}

微信图片_20240508123645.png

三、总的来说，.parent的height能不写就不写

avatar
文章
阅读
粉丝