关于未知高度的垂直居中

时间 2019-11-13

标签关于未知高度垂直居中繁體版

原文原文链接

1.内容为纯文字的时候的垂直居中css

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>未知高度垂直居中</title>
        <style type="text/css">
        .box{width: 200px;height: 500px;background-color: yellow;}
        .box:before{content:"我是备胎";width: 0;height: 100%;display: inline-block;vertical-align: middle;}
        .boxWrap{display: inline-block;vertical-align: middle;}
        </style>
</head>
<body>
        <div class="box">
                <div class="boxWrap">
                快让我垂直居中，混蛋！<br>
                快让我垂直居中，混蛋！<br>
                快让我垂直居中，混蛋！<br>
                快让我垂直居中，混蛋！<br>
                快让我垂直居中，混蛋！<br>
                快让我垂直居中，混蛋！<br>
                快让我垂直居中，混蛋！<br>
                快让我垂直居中，混蛋！<br>
                快让我垂直居中，混蛋！<br>
                </div>
        </div>
</body>
</html>

解释：也许你会想到vertical-align属性，可是vertical-align是须要有参照物的，若是直接给他vertical-align：middle是不行的
因此，这就是为何加content："";的缘由，给内容一个参照物就能够轻松居中了。固然还须要用到display：inline-block;属性由于没有这个属性的话他们就不能在一行显示，更别谈参照垂直居中了。html

2.先看看box套box吧spa

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>未知高度垂直居中</title>
        <style type="text/css">
        .box{width: 200px;height: 500px;background-color: yellow;font-size: 0;text-align: center;}
        .box:before{content:"";width: 0;height: 100%;display: inline-block;vertical-align: middle;font-size：14px;}
        .boxWrap{display: inline-block;vertical-align: middle;font-size: 14px;background-color: #000;width: 100px;height: 100px;}
        </style>
</head>
<body>
        <div class="box">
                <div class="boxWrap"></div>
        </div>
</body>
</html>

3.内容是多种混合

先上一个有意思的bug
只须要在父级上加个font-size：0；便可。

固然罪魁祸首是这个display：inline-block；

由于父级的默认font-size致使两个div之间有间隙，因此把旁边的div挤下去了。

请看下图

好了，进入正题code

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>未知高度垂直居中</title>
        <style type="text/css">
        .box{width: 200px;height: 500px;background-color: yellow;font-size: 0}
        .box:before{content:"";width: 0;height: 100%;display: inline-block;vertical-align: middle;font-size：14px;}
        .boxWrap{display: inline-block;vertical-align: middle;font-size: 14px;}
        .box1{width: 300px;height: 200px;}
        </style>
</head>
<body>
        <div class="box">
                <div class="boxWrap">
                <h1>我是他们的头头</h1>
                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRXP8QWhU1KHIEwr7ULQevzAOLNXw4EOdrqvh6eNUURZqjz4on_sQ" style="width: 100%;">
                快让我垂直居中，混蛋！<br>
                快让我垂直居中，混蛋！<br>
                快让我垂直居中，混蛋！<br>
                快让我垂直居中，混蛋！<br>
                快让我垂直居中，混蛋！<br>
                快让我垂直居中，混蛋！<br>
                快让我垂直居中，混蛋！<br>
                快让我垂直居中，混蛋！<br>
                快让我垂直居中，混蛋！<br>
                </div>
        </div>
</body>
</html>