pc端常見佈局---垂直居中佈局單元素不定高

時間 2019-11-06

標籤常見佈局垂直居中元素不定简体版

原文原文鏈接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>常見元素佈局</title>
        <style type="text/css">
            /* 1、垂直居中佈局 */
            /* 1.單個元素垂直居中 高度不固定*/ .content { position: relative; height: 100px; background: #008000;/* height和background測試更好的觀看效果 可忽略*/
            } .box { position: absolute; top: 50%; transform: translateY(-50%); background: #ff9933; color: #fff;/* background和color測試更好的觀看效果 */
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="box"> 高度不固定 </div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>常見元素佈局</title>
        <style type="text/css">
            /* 1、垂直居中佈局 */
            /* 2.單個元素垂直居中 高度不固定 缺點：由父類控制是否居中*/ .content { display: table-cell; vertical-align: middle;
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="box"> 高度不固定 </div>
        </div>
    </body>
</html>

效果：css

相關標籤/搜索

pc端常見佈局---垂直居中佈局 單元素不定高

pc端常見佈局---垂直居中佈局單元素不定高