002.怎麼讓一個不定高的DIV垂直水平居中

時間 2019-12-05

標籤怎麼一個不定高的 div 垂直水平居中欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="main">
        <div class="content">
            我垂直水平居中的內容
        </div>
    </div>
</body>
<style>
    html,body{
        width: 100%;
        height: 100%;
    }
    .main{
        width: 100%;
        height: 100%;
    }
    /* 方法一：使用 flex */
    /* .main{
        display: flex;
        justify-content: center;
        align-items: center;
    } */

    /* 方法二：使用transform */
    /* .main{
        display: relative;
    }
    .content{
        transform: translate(-50%, -50%);
        position: absolute;
        top: 50%;
        left: 50%;
    } */

    /* 方法三：使用table 和 table-cell */
    /* .content width 父級的100%，更改無效 */
    /* .main{
        display: table;
    }
    .content{
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    } */

    /* 方法四：使用 table-cell */
    /* .main(父級)寬度得給定值，使用 百分比無效 */
    .main{
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .content{
        display: inline-block;
        vertical-align: middle;
    }
</style>
</html>

相關標籤/搜索