html 高度只有一半,CSS: 元素高度为自身宽度的一半

高度只有一半,CSS: 元素高度为自身宽度的一半"/>

html 高度只有一半,CSS: 元素高度为自身宽度的一半

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

简单描述一下：

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

A 元素垂直居中屏幕中央

A 元素里面的文字大小20px, 水平垂直居中

A 元素的高度始终是自身宽度的50%

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

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;

}

```html

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

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