Positioning elements in the middle inside DIVs

Question

I have a problem with this HTML code I'm trying to write. This is the actual code:

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

In my container fluid I just have a picture, which is like a BG cover, but I want to put a <h1> and <input> on top of that picture to pretend it's a search bar in the middle of this picture.

This is my CSS for it: (I'm also putting there .cover so you can imagine there is that picture as a background)

.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;
}

So as you can see, the <h1> and <input> they are centered, but they are on the top. vertical-align: middle; is not working, also align-item: center; is not working.

Hopefully, I've mentioned everything that is needed. If not, I'm sorry. I'm pretty much new to this.

score 0 · Accepted Answer · answered May 27 '17 at 13:36

0

You can use fixed position:

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

}

answered May 27 '17 at 13:36

Thomas Ray

93
8

score 0 · Answer 2 · answered May 27 '17 at 13:39

The simplest solution here is use Flexbox model for .search container. Here the example:

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

Positioning elements in the middle inside DIVs

2 Answers2