时间戳

首页 > 解决方案 > 为什么我的标题垂直居中其子级？

html - 为什么我的标题垂直居中其子级？

问题描述

我无法理解的默认行为display: flex

当我只添加它时，为什么我的header垂直居中它的孩子display: flex。

我没有添加align-items: center;到header.

是因为我分配的height: 100px;吗？

header {
  display: flex;
  border: 1px solid black;
  height: 100px;
}

header div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 1224px;
  margin: 0 auto;
}

nav a:not(:last-child) {
  margin-right: 55px;
}
<header>
  <div>
    <a href="#">Link</a>
    <nav>
      <a href="#">one</a>
      <a href="#">two</a>
      <a href="#">three</a>
     </nav>
     <a href="#">Link</a>
  </div>
</header>

我知道div有display: flex，align-items: center;但是为什么父 html 元素header也需要display: flex它的子元素垂直居中？

标签： htmlcss

解决方案

当您应用display: flex到父div级时，其子级“拉伸”以假定容器的完整高度和宽度，因为默认align-items属性是stretch.

header因此， now的孩子的高度为100px（之前是其内容的高度），并且内容居中。

您的解决方案（应用height: 100%）有效，因为内容的高度现在是100px（容器的高度），本质上是模拟 flexbox 的垂直拉伸。

推荐阅读