关于未知高度的垂直居中

最新推荐文章于 2022-09-14 14:23:00 发布

weixin_30878501

最新推荐文章于 2022-09-14 14:23:00 发布

阅读量68

点赞数

原文链接：http://www.cnblogs.com/ma-chao/p/7509430.html

版权

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

<!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;属性因为没有这个属性的话他们就不能在一行显示，更别谈参照垂直居中了。

2.先看看box套box吧

<!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挤下去了。

请看下图

好了，进入正题

<!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>

转载于:https://www.cnblogs.com/ma-chao/p/7509430.html

weixin_30878501

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于未知高度的垂直居中

1.内容为纯文字的时候的垂直居中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>未知高度垂直居中</title> <style type="text/css"&gt...
复制链接

扫一扫