How do i create media rule to horizontally center absolute div?

Question

I have absolutely positioned div(#searchContainer) which contains input and a button.Currently div is aligned to the right.I would like to create media rule which would horizontally center this div on screens less then 600px wide.Also i would like both input and a button to have width 100% of a parent element so that button is under the input(on screens less then 600px wide).

#searchContainer {
  padding: 15px;
  position: absolute;
  top: 0;
  right: 0;
}

#searchContainer input {
  width: 200px;
}

#searchContainer button {
  background-color: rgb(1, 159, 198);
  width: 75px;
}

<div id="searchContainer">
      <input
        class="searchControl"
        type="text"
        placeholder="City Name or Zipcode"
        id="searchInput"
      />
      <button class="searchControl" id="searchBtn">Search</button>
    </div>

enter image description here

score 0 · Answer 1 · answered Mar 06 '19 at 15:06

   @media screen and (max-width: 600px) {
       #searchContainer {
         left: 50%; 
         transform: translateX(-50%);
       }
   }

You can use the @media rule to apply your css at 600px max-widht. horizontally center of absolute elements you can use "left: 50%" and "transform: translateX(-50%).

Don't forgett to reset the "right" and padding statements

How do i create media rule to horizontally center absolute div?

1 Answers1