问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A，文字需要水平垂直居中。思路一：利用height:0; padding-bottom: 50%;<!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>Document</title><style>*{margin: 0;padding: 0;}html, body {height: 100%;width: 100%;}.outer_wrapper {margin: 0 10px;height: 100%;/* flex布局让块垂直居中 */display: flex;align-items: center;}.inner_wrapper{background: red;position: relative;width: 100%;height: 0;padding-bottom: 50%;}.box{position: absolute;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 20px;}</style></head><body><div class="outer_wrapper"><div class="inner_wrapper"><div class="box">A</div></div></div></body>
</html>备注:padding-bottom是相对于父元素的width值。out_wrapper：CSS呈流式布局，div默认宽度填满，即100%大小，给out_wrapper设置margin: 0 10px;相当于让左右分别减少了10px。父元素相对定位，那绝对定位下的子元素宽高若设为百分比，是相对于父元素的(content + padding)值, 注意不含border延伸：如果子元素不是绝对定位，那宽高设为百分比是相对于父元素的宽高，标准盒模型下是content, IE盒模型是content+padding+border。思路二: 利用calc和vw<!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>Document</title><style>* {padding: 0;margin: 0;}html,body {width: 100%;height: 100%;}.wrapper {position: relative;width: 100%;height: 100%;}.box {margin-left: 10px;/* vw是视口的宽度， 1vw代表1%的视口宽度 */width: calc(100vw - 20px);/* 宽度的一半 */height: calc(50vw - 10px);position: absolute;background: red;/* 下面两行让块垂直居中 */top: 50%;transform: translateY(-50%);display: flex;align-items: center;justify-content: center;font-size: 20px;}</style></head><body><div class="wrapper"><div class="box">A</div></div></body>
</html>