CSS 将 100vh 着陆页的图像以纵向或横向模式居中

Question

我正在尝试为我的网站创建登陆页面。着陆点的大小始终是设备的高度或底部带有箭头的 100vh，用于将用户滚动到下方的内容。我希望我的脸在着陆点的中央 div。在桌面上定位它并不是很困难，因为我将图像留在屏幕中央相对较小，但在移动设备上，纵向视图很长很瘦，或者横向很宽但很短，我不确定如何定位我的图像和文本，以便它们在多种设备上一致地工作。

<div class="landing">
    <div class="content">
        <img src="image.svg">
        <h1>My Name</h1>
        <p>Small tagline</p>
    </div>
</div>

.landing {
    height: 100vh;
    position: relative;
    text-align: center;
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

img {
    width: 300px;
}

@media screen and (min-width: 767px) {
    img {
        width: ?
        height: ?
    }
}

Answer 1

你试过 flexbox 了吗？

这是一个例子。希望对你有所帮助。

content{
  height : 100vh;
  display : flex;
  flex-direction : column;
  align-items: center;
  justify-content : space-around;
}
.logo{
  flex:1 1 auto;
  display:flex;
  flex-direction :column;
  justify-content : center;
  align-items : center;
}

.ex{
  flex:2;
  display : flex;
}
.ex p{
  align-self: flex-end;
}

<div class="landing">
    <div class="content">
      <div class="logo"><img src="image.svg">
      <h1>My Name</h1></div>
      <div class="ex"><p>Small tagline</p></div>
    </div>
</div>

CSS 将 100vh 着陆页的图像以纵向或横向模式居中

CSS centering an image in portrait or landscape mode for a 100vh landing page

html

css

responsive