极客观点
项目管理
HarmonyOS
这是由掘金上一个面试者一道题目的思考，要求用css实现，本来觉得很简单不想动手，不过经常觉得不动手容易理解不好，所以试试。
要求：
A元素垂直居中
A元素距离屏幕左右各边各10px
A元素里的文字font—size:20px,水平垂直居中
A元素的高度始终是A元素宽度的50%
－－－－
我的理解是页面上除了A元素，大部分情况还存在其它元素，所以A元素要用一个盒子包起来以免干扰其它元素，A元素在该盒子内满足上述问题需求即可，
个人实现的完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型居中</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
position: relative;
background-color: palegoldenrod;
width: 100%;
box-sizing: border-box;
padding-top: calc(25% - 5px);
padding-bottom: calc(25% - 5px);
}
.Abox {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background-color: plum;
margin-left: 10px;
margin-right: 10px;
width: calc(100% - 20px);
text-align: center;
font-size: 20px;
}
</style>
</head>
<body>
<div class="box">
<div id="Abox" class="Abox">A元素垂直居中 A元素距离屏幕左右各边各10px A元素里的文字font—size:20px,水平垂直居中 A元素的高度始终是A元素宽度的50% </div>
</div>
</body>
</html>以上实现可以满足Abox在box中垂直居中，不需要提前知道box和Abox的高度。
其实觉得最不好处理是在不知道任何实际宽高的情况下，A元素的高度始终是A元素宽度的50%。
局部分析：
0.全局和背景
* {
margin: 0px;
padding: 0px;
}
.box {
background-color: red;
}
.Abox {
background-color: greenyellow;
}1.先出来简单的垂直居中，Abox垂直居中,box用相对定位，Abox用绝对定位结合top:0;bottom:0;margin:auto即可实现。
.box {
position: relative;
width: 100%;
}
.Abox {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
2.A元素距离屏幕左右10px,box宽度为100%,则A元素宽度要用100%减去左右两边共20px=>
.Abox {
margin-left: 10px;
margin-right: 10px;
width: calc(100% - 20px);
}
3.box高度不知，但Abox的高度始终为Abox宽度的一半，想着利用下ie的怪异盒子模型，盒子的width=内容的width+padding+border==>用padding去撑起盒子的width,让内容的width和border为0,所以题目转换为求Abox的高，即为求一半盒子的width，1/2(100% - 20px)==>(50% - 10px)再对半即为padding-top,padding-bottom==>(25% - 5px).将Abox高套在box上撑高整个区域。
.box{
box-sizing:border-box;
padding-top:calc(25% - 5px);
padding-bottom:calc(25% - 5px);
}4.A元素里的字体font-size:20px,水平居中：
.Abox{
font-size:20px;
text-align:center;
}效果图：
问题来了：
Abox其实整个可视区域的高度是靠怪异盒子模型里的padding去撑起来的，也就是上面的190px实际上不是对应css里面的height,而是padding-top和padding-bottom的叠加，内容的height实际上为0，那么普通line-height等于height的情况就处理不了内部文字的垂直居中了。所以这种情况应该怎么处理呢？还是说怪异盒子模型来处理这道题的居中还是根本就不适合的？
后面完善的时候会补上js的做法和display:flex的做法。
第一次知道 padding 可以这么用，厉害厉害。
Abox 的 height 是 190px 没错啊，box 的 height 才为 0。
line-height 适合处理单行文字的垂直居中，多行就不行了。
题主想用绝对定位来垂直居中，但是需要 Abox 有具体的 height 且与文本区域的 height 一样。
然后这种情况我觉得可以给文本区域加个包含块来解决。
利用表格样式：
利用变换 transform：