【CSS】CSS元素的垂直居中案例

CSS元素的垂直居中案例

1. 绝对定位

缺点

• 必须使用定位，并且是脱标元素
• 必须给元素设置高度

<div class="container">
  <div class="box"></div>
</div>

.container {
  position: relative;

  width: 300px;
  height: 300px;

  background-color: orange;
}
.box {
  position: absolute;
  top: 0;
  bottom: 0;

  width: 100px;
  height: 100px;
  margin: auto 0;

  background-color: pink;
}

2. flex布局

<div class="container">
  <div class="box"></div>
</div>

.container {
  display: flex;
  align-items: center;

  width: 300px;
  height: 300px;

  background-color: orange;
}
.box {
  width: 100px;
  height: 100px;

  background-color: pink;
}

3. 利用形变

<div class="container">
  <div class="box"></div>
</div>

.container {
  width: 300px;
  height: 300px;

  background-color: orange;
}
.box {
  position: relative;
  top: 50%;

  width: 100px;
  height: 100px;

  background-color: pink;

  transform: translateY(-50%);
}

4. 行内元素的垂直居中

利用行盒的概念，待补充