固定定位下的div水平居中

發現了一個之前未留意的知識點，做個筆記。

當一個塊級元素的父元素開啟了flex布局后，我們可以很輕松的將這個元素居中對齊，可以在父元素上加

justify-content: center;
align-items: center;/*單行下的居中對齊*/

　或

 justify-content: center;
    align-content: center;
    flex-wrap: wrap;/*多行下的居中對齊*/

　然而，這種對齊方式是基於父元素開啟了flex布局方式，假設該子元素開啟了固定定位后，這種對齊方式便會失效，因為固定定位脫離了文檔流，不受父元素的影響，父元素內對子元素的定位方式自然就不起作用了，那么問題來了：能否將這個固定定位的盒子居中顯示呢？

方法是人想出來的。

在這里，我們可以結合css3和百分比定位達到目的：

.search_box {
    position: fixed;
    top: 0;
    left: 50%;
 -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
    max-width: 540px;
    min-width: 320px;
    /* 固定定位，脫離文檔流 */
    height: 44px;
    /* 通過與left配合，使這個div居中顯示 */
}

　　第一步：定位在50%,此時盒子會在居中靠右位置，但盒子的起點位於屏幕居中位置， top: 0;  left: 50%; //以屏幕為基准，定位使盒子移動屏幕的一半 

 

 

第二步：使用transform：translateX(-50%)：將盒子水平向左位移到自身寬度的一半。//以自身為基准 ，通過transform使盒子移動自身寬度的一半

 

 這樣，就完成了水平居中顯示.