关于未知高度的垂直居中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于未知高度的垂直居中相关的知识，希望对你有一定的参考价值。
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>
以上是关于关于未知高度的垂直居中的主要内容，如果未能解决你的问题，请参考以下文章