題目來自某社招的前端面試題铁追。
簡單描述一下：
屏幕中間有個元素A妖混，隨著寬度的增加梗搅，始終滿足以下條件：
- A 元素垂直居中屏幕中央
- A 元素里面的文字大小20px, 水平垂直居中
- A 元素的高度始終是自身寬度的50%
題目比較簡單战坤， 簡單實現(xiàn)一下：
<!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
此做法只是一種實現(xiàn)参淫， 僅供參考。
// ˙-˙ 簡書的代碼格式感覺有些問題拣播。晾咪。
