實現div水平、垂直居中的幾種方法
阿新 • • 發佈：2019-01-10
1、最常用的，也是最簡單的(利用position定位、再用margin偏移)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>實現div水平垂直居中</title> <style type="text/css"> body{ background: #272822; } .test{ position: absolute; top:50%; left:50%; width: 100px; height: 100px; margin:-50px 0 0 -50px; background: #27399a; } </style> </head> <body> <div class="test"></div> </body> </html>
2、利用css3新增屬性彈性盒子align-items和justify-content（會存在一些相容性問題，沒關係，以後肯定會相容的）
這種方法還有一個好處：就算不給裡層容器定義寬高，也會根據文字內容自動居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>實現div水平垂直居中</title> <style type="text/css"> .bg{ display: flex; width:500px; height: 500px; margin:0 auto; background: #272822; -webkit-align-items: center; align-items: center; justify-content: center; } .test{ /*width: 100px; height: 100px;*/ background: #27399a; color:#fff; } </style> </head> <body> <div class="bg"> <div class="test">aaaaaaaaaaaaaa</div> </div> </body> </html>
3、這裡擴充一下flex的盒子佈局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>實現div水平垂直居中</title> <style type="text/css"> .bg{ display: flex; width:500px; height: 500px; margin:0 auto; background: #272822; -webkit-align-items: center; align-items: center; justify-content: center; } .test{ height: 100px; background: #27399a; margin-left: 10px; } .test:nth-child(1){ flex:1; } .test:nth-child(2){ flex:2; background: #a6e22e; } .test:nth-child(3){ flex:1; background: #48beef; margin-right: 10px; } </style> </head> <body> <div class="bg"> <div class="test"></div> <div class="test"></div> <div class="test"></div> </div> </body> </html>
