DIV中间的定位元素

Question

我试图写这个HTML代码有问题。这是实际的代码：

<div class="container-fluid cover"> 
    <div class="container search"> 
     <h1 class="search-carport">Search your carport</h1> 
     <input type="text" placeholder="Search..."> 
    </div> 
</div> 

在我的容器流体我只是有一幅画，它就像一个BG封面，但我想提出一个<h1>和<input>对画面的顶部假装这是一个搜索栏在这张照片的中间。

这是我为它的CSS（我也把有设备罩起来，所以你能想象有那张照片作为背景）

.cover { 
    background-image: url("../img/cover.jpg"); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: 50% 60%; 
    height: 525px; 
} 

.search { 
    position: relative; 
    text-align: center; 
    height: 525px; 
} 

因此，大家可以看到，<h1>和<input>他们是集中的，但他们在顶部。 vertical-align: middle;不工作，也align-item: center;不起作用。

希望我已经提到了所有需要的东西。如果没有，我很抱歉。我对此很新。

Answer 1

可以使用固定位置：

.search { 
position: fixed; 
    text-align:center; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%); 

}

Answer 2

这里最简单的解决方法是使用Flexbox的模型.search容器。这里的例子：

.search { 
    display: flex; 
    height: 100%; // automatically take whole height of the parent 
    align-items: center; // align vertically 
    justify-content: center; // align horizontally 
}