1.要求
盒子垂直居中显示，距离左右的边距是10px，高度要始终等于宽度的一半，内容要垂直居中显示,字体大小设置为20px;
2.直接上代码
CSS样式
<style>
.box{
position: absolute;
left: 10px;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
.content{
height:0;
padding: 25% 0;
font-size: 20px;
text-align: center;
}
<style>
HTML代码
<body>
<div class="box">
<div class="content">内容</div>
</div>
</body>
3.解析一下
这里只解析三点：
一、在不知道高宽的时候怎么让盒子居中的问题；
定位left：50%；但是盒子本身还有一个宽度，所以这里我们要想法把这个宽度或者高度给移过去；如果知道宽高，那么可以用margin-left:-(宽度的一半的值)px;高度同理；不知道的情况下，就要让盒子本身发生平移，这里就要用到transform:translate(-50%,-50%);这里需要用到哪个可以具体设置；
二、让盒子的高度始终等于宽度的一半
宽度在可变的情况下，要设置高度始终等于宽度的一半，那么就得提一下margin和padding的百分比值的参照是谁，他们的百分比等于的不是高度的而是宽度的百分比；所以这里只需要设置padding:25% 0;这样就让高度变成了宽度的一半；
三、关于代码中为什么要加上box盒子，以及为什么要加上content的高度为0
padding宽度等于盒子宽度的一半，由于box盒子没有宽度，padding设置的时候会找父元素的宽度，而要求的是左右边距有10px，那么实际的padding就会比50%大；这里加个盒子，内容设置padding的时候找的就是已经设置过边距的box元素的宽；而content设置height为0，则是padding上下已经有50%的宽度了，所以要把内容的高度给去掉，满足始终等于宽度的一半的要求；
网友评论