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;/* background和height测试更好的观看效果 */
            } .box { height: 50px; position: absolute; top: 0; bottom: 0; margin: auto 0; background: #ff9933; color: #fff; /* background和color测试更好的观看效果 */ line-height: 50px; /* 文字垂直居中 */
            }
        </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 { height: 100px; line-height: 100px; background: #008000;/* background测试更好的观看效果 可忽略*/
            } .box { display: inline-block; height: 50px; vertical-align: middle; background: #ff9933; color: #fff;/* background和color测试更好的观看效果 */ line-height: 50px;/* 文字垂直居中 */
            }
        </style>
    </head>
    <body>
        <div class="content">
            <div class="box"> 高度固定 </div>
        </div>
    </body>
</html>

效果：css

pc端常见布局---垂直居中布局 单元素定高

pc端常见布局---垂直居中布局单元素定高