除了flex和grid以外的常规垂直居中布局

日常工作中，除了flex、grid以外好用的垂直剧中方法。

页面布局

css

.outer-box{
  width: 600px;
  height: 400px;
  background: hsl(213, 87%, 79%);
  border-radius: .5rem;
  box-shadow: 0 0 1rem rgb(0 0 0 / .25);
}
.inner-text{
  margin: 0;
  text-align: center;
  font-size: 3rem;
}
.inner-box{
  background: hsl(343, 89%, 84%);
  border: 10px dashed hsl(333, 60%, 38%);
  border-radius: .5rem;
}

html

<div class="outer-box">
 <p class="inner-text">略略略...</p>
 <div class="inner-box"></div>
</div>

1line-height

通过给父级元或子元素自身添加行高达到垂直剧中

css

.inner-text{
  line-height: 400px;
}

2table

使用table-cell使其子元素惯性居中

css

.outer-box{
  display: table;
}
.inner-text{
  display: table-cell;
  vertical-align: middle;
}

3absolute--translate

绝对定义+translate实现居中

css

.outer-box{
  position: relative;
}
.inner-text{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

4inset

使用方位缩写属性达到和绝对定位一样的效果

css

.outer-box{
	position: relative;
}
.inner-box{
  position: absolute;
  inset: 0;
  width: 200px;
  height: 200px;
  margin: auto;
}

5padding

使用padding填充达到居中效果

css

.outer-box{
  padding: 300px 0;
}
.inner-box{
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

6calc

使用计算属性计算padding值达到居中

(50vh - 元素高度) / 2
适口高度的一半 - 元素高度 / 2 抵消padding多出的部分

css

.outer-box{
   --inner-height: 200px;
   width: 100%;
   height: auto;
   padding: calc(50vh - var(--inner-height) / 2) 0;
}
.inner-box{
    width: 200px;
    height: var(--inner-height);
    margin: 0 auto;
}