CSS: 元素高度为自身宽度的一半

题目来自某社招的前端面试题。

简单描述一下：
屏幕中间有个元素A，随着宽度的增加，始终满足以下条件：

A 元素垂直居中屏幕中央
A 元素里面的文字大小20px, 水平垂直居中
A 元素的高度始终是自身宽度的50%

题目比较简单，简单实现一下：

<!doctype html>
<html>

<head>
    <style type="text/css">

    body {
        margin: 0;
    }

    .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #eaeaea;
        height: 500px;

    }
    .inner {
        flex: 1;
        text-align: center;
        background: blue;
        color: #fff;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;

        padding: 25% 0;
        height:0;

    }

    </style>
</head>

<body>
    <div class="wrapper">
        <div class="inner"> A </div>
    </div>
</body>
</html>

```html

此做法只是一种实现， 仅供参考。


//  ˙-˙  简书的代码格式感觉有些问题。。

最后编辑于：2017.12.15 16:07:35

CSS: 元素高度为自身宽度的一半

推荐阅读更多精彩内容