關於未知高度的垂直居中

時間 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。