CSS實現div居中
阿新 • • 發佈：2018-12-18
margin-top: 50%;
50%：對應的是父元素的寬度的50%
第一種方法
定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #div { width: 100px; height: 100px; background-color: red; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; } </style> </head> <body> <div id="div"></div> </body> </html>
第二種方法
彈性盒子模型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #div1{ height: 500px; background-color: yellow; display: flex; justify-content: center; align-items: center; } #div { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="div1"> <div id="div"></div> </div> </body> </html>
第三種方法
定位後偏移
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div2{ width: 100px; height: 100px; background-color: red; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -50px; } </style> </head> <body> <div id="div2"> </div> </body> </html>