如何创建媒体规则以水平居中绝对div？

Question

我有绝对的位置div (# button.Currently容器)，其中包含输入和搜索div的div是向右对齐。我想创建媒体规则，将水平居中这个div小于600px的屏幕上，我希望输入和按钮都有一个父元素的宽度100%，这样按钮下的输入(屏幕上小于600px宽)。

​

#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

Answer 1

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

你可以使用@media规则在600px max-widht上应用你的css。绝对元素的水平中心可以使用"left: 50%“和"transform: translateX(-50%)”。

别忘了重置"right“和padding语句