高度百分比文字如何垂直居中

時間 2019-11-17

標籤高度百分比文字如何垂直居中简体版

原文原文鏈接

一.經常使用方式

讓文字水平垂直居中一般使用的方法是:text-align: center(水平居中);line-height: 20px(垂直居中);值得注意的是line-height的值必須是固定值，即該元素的高度必須固定。html

二.引出問題

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
            *{
                width: 100%;
                height: 100%;
            }
            .box{
                width: 40%;
                height: 30%;
                font-size: 24px;
                background: red;
                text-align: center;
                line-height: 100%;        （注意）
            }
    </style>
    <body>
        <div class="box">
            快讓我水平垂直居中！！！
        </div>
    </body>
    </html>
複製代碼

效果圖：佈局