Question

目标：将div中包含的文字居中，并且是包含div元素的video的兄弟。

问题：我使用flexbox查看我是否可以证明div的内容中心并使其项目沿垂直轴对齐。它很好地沿x轴居中，但不沿y轴居中。

有什么建议吗？

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
video {
  position: fixed;
  top: -100px;
}
.text {
  z-index: 2;
  color: #fff;
  font-size: 2em;
  text-transform: uppercase;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /*border: 1px solid black;*/
  /*height: 100%;*/
}

＆＃13;

<div class="container">
  <video poster="http://www.thecanyon.com/assets/css/images/grandcanyon1.jpg" muted="true" autoplay="true">
    <source src="assets/Homepagevideo.mp4" type="video/mp4"></source>
  </video>
</div>
<div class="text">
  <p>This is a cool video landing page</p>
</div>

＆＃13;

Answer 1

将宽度和高度100％添加到.text然后添加text-align:center

Codepin

Answer 2

这是你应该实现它的方式：

.text {
    width: 100%;
    height: 100%;
    text-align: center;
}

Answer 3

实现此目的的一种方法，即垂直居中文本是指通过指定弹性容器的高度并将文本的“margin”属性设置为“auto”，以及是否希望文本沿整个页面集居中这样的高度：

.text {
height: 100%;
}

将上面的内容添加到Flex容器的现有样式中，并添加它：

.text p {
margin: auto;
}

无论柔性容器的高度有多高，上述内容都可用于将文本居中放置在柔性容器内。这将适用于flex容器的“flex-direction”属性的任何值。

Answer 4

Flexbox对你的需求来说太过分了，尝试使用position：absolute，因为你已经有了元素。

相关CSS

.text {
  z-index: 2;
  color: #fff;
  font-size: 4rem;
  font-variant: small-caps;
  text-align: center;
  min-height: 4em;
  width: 100vw;
  position: absolute;
  top: calc(50% - 2em);
}

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
video {
  position: fixed;
  top: 0;
}
.text {
  z-index: 2;
  color: #fff;
  font-size: 4rem;
  font-variant: small-caps;
  text-align: center;
  min-height: 4em;
  width: 100vw;
  position: absolute;
  top: calc(50% - 2em);
}

＆＃13;

<div class="container">
  <video poster="http://www.thecanyon.com/assets/css/images/grandcanyon1.jpg" muted="true" autoplay="true">
    <source src="assets/Homepagevideo.mp4" type="video/mp4"></source>
  </video>
</div>
<div class="text">
  <p>This is a cool video landing page</p>
</div>

＆＃13;

文本不使用flexbox居中

4 个答案: