布局题：div垂直居中，左右10px，高度始终为宽度一半 #23

conan1992 · 2020-06-17T08:09:43Z

要求：

实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A，文字需要水平垂直居中。

关键点：

高度始终是宽的的50%；那么要怎么实现呢？
这就要用到padding了，因为padding百分比是根据宽度来计算的；

父元素相对定位，那绝对定位下的子元素宽高若设为百分比，是相对谁而言的？
相对于父元素的(content + padding)值, 注意不含border
延伸：如果子元素不是绝对定位，那宽高设为百分比是相对于父元素的宽高，标准盒模型下是content, IE盒模型是content+padding+border。

方法1

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <title>waiting</title>
    <style>
        ul,li {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        html,body { height: 100%; padding: 0; margin: 0;}
        .wrap {
            background: #eee;
            width: 100%;
            padding: 0 10px;
            display: flex;
            height: 100%;
            box-sizing: border-box;
        }
        .test {
            background: red;
            width: 100%;
            padding-top: 50%;
            margin: auto;
            position: relative;
            display: flex;
        }
        .test>div{
            color:#fff;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
<div class="wrap clearFloat">
    <div class="test">
        <div>A</div>
    </div>
</div>
</body>

</html>

方法2
用calc

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <title>waiting</title>
    <style>
        ul,li {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        html,body { height: 100%; padding: 0; margin: 0;}
        .wrap {
            background: #eee;
            width: 100%;
            height: 100%;
            padding: 0 10px;
            position: relative;
            box-sizing: border-box;
            display: flex;
        }
        .test {
            background: red;
            width: 100%;
            height: calc(50% - 10px);
            margin: auto;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
<div class="wrap clearFloat">
    <div class="test">A</div>
</div>
</body>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

布局题：div垂直居中，左右10px，高度始终为宽度一半 #23

布局题：div垂直居中，左右10px，高度始终为宽度一半 #23

conan1992 commented Jun 17, 2020

布局题：div垂直居中，左右10px，高度始终为宽度一半 #23

布局题：div垂直居中，左右10px，高度始终为宽度一半 #23

Comments

conan1992 commented Jun 17, 2020

要求：

关键点：