固定定位下的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使盒子移動自身寬度的一半

 

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