發現了一個之前未留意的知識點，做個筆記，
當一個塊級元素的父元素開啟了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使盒子移動自身寬度的一半
這樣，就完成了水平居中顯示.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/41306.html
標籤：HTML5
上一篇：h5中的分組元素figure、figcaption、hgroup元素介紹
下一篇：vue中使用scss