今天有空寫了一個自己主頁的網站，瀏覽器兼容（主要ie 9以上和chrome），有一個以前的問題也是很常見的問題，既然遇見了，索性就記錄下來。直接看問題吧
<!DOCTYPE html><html><head><meta charset="utf-8"><title>文檔標題</title></head><body> <div class="aaa"> <div> </div> </div></body></html><style>.aaa{ width:700px; height:500px; position:absolute; background-color:red; display: flex; align-items: center;}.aaa div{ height: 200px; width:200px; position: absolute; background-color:yellow; }</style>前提：適合子元素需要水平居中，但垂直方向需要進行position:absolute，如果是進行position:relative或者其他,在ie或chrome都是一樣的，都要以子元素width中點為基點。
ie下： 父容器中屬性：display: flex;align-items: center;是水平居中，但是基點是左上角，如下圖。如果想要水平居中，則需要加：transform:translateX(-50%)，這意思就是將作用在元素上的總體位置向左移動自身width的50%,好處就是不管自知不知道該元素的width都可以。
chrome: 父容器中屬性：display: flex;align-items: center;直接將子元素進行水平居中，基點是以子元素width的中點，而不是ie中的左上角;
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
