對於PC和mobile 水平垂直居中適配
阿新 • • 發佈:2019-01-09
div{
width: 500px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -200px;
background-color: black;
}
對於PC的一個DIV居中應該是沒什麼問題的
這樣就居中了
但是如果要適配移動端的話,這個div可能就會顯得比較大,一般情況下左右兩邊會超出螢幕。
最好的辦法應該把width設為100%,這樣就能適配各種的解析度。
所以我做了以下更改
div{ width: 100%; max-width: 500px; height: 400px; position: absolute; top: 50%; left: 50%; margin-left: -250px; margin-top: -200px; background-color: black; }
貌似這樣就可以解決問題了
但問題又來了,當頁面的寬度小於500px的時候,比如400px,卻要向左移動250px,按照left:50%來算應該從200開始減去250,所以是-50px
所以適配又出了問題
那麼我們要怎麼做呢?
這個時候我突然想到
margin: 0 auto;
可以水平居中但不能垂直居中。
然後就把這段程式碼放了上去。
怎麼調都沒辦法居中。
然後突然想到一個解決方法:
使用
position: relative;
和
margin: 0 auto;
相結合來做
html,body{
width: 100%;
height: 100%;
}
這樣就適配移動和PC的所有解析度了!div{ width: 100%; max-width: 500px; height: 400px; margin: 0 auto; position: relative; top: 50%; margin-top: -200px; background-color: black; }