题目来自某社招的前端面试题。
简单描述一下：
屏幕中间有个元素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
此做法只是一种实现， 仅供参考。
// ˙-˙ 简书的代码格式感觉有些问题。。
网友评论