New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

第 70 期(W3C 标准-CSS-布局排版)：不定高垂直居中 #73

Open

wingmeng opened this issue Jul 26, 2019 · 0 comments

Collaborator

wingmeng commented Jul 26, 2019

不定高垂直居中对齐，即没有固定高度的子元素在父容器里垂直居中对齐。

.parent {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}

.child {background: #fd0;}

<div class="parent">
  <div class="child">The quick brown fox jumps over the lazy dog.</div>
</div>

解决方案：

/* 方法1 */
.child {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* 方法2 */
.parent {
  display: flex;
  align-items: center;
}

/* 方法3 */
.parent {
  display: table-cell;
  vertical-align: middle;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment