一、垂直水平居中方法
(1)使用flex布局，给父元素设置display:flex和justify-content:center和align-items:center;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: skyblue; width: 500px; height: 500px; margin:0 auto; display: grid; justify-items: center; align-items: center;/*使用align-content:center也可*/ } #son { background-color: tomato; } </style> </head> <body> <div class="box"> <div id="son">我是水平居中元素</div> </div> </body> </html>
(2)使用flex布局，给父元素设置display:flex和子元素设置margin:auto;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: skyblue; width: 500px; height: 500px; margin:0 auto; display: flex; } #son { background-color: tomato; margin: auto; } </style> </head> <body> <div class="box"> <div id="son">我是水平居中元素</div> </div> </body> </html>
（3)使用grid布局，给父元素设置display:grid,子元素设置margin：auto
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: skyblue; width: 500px; height: 500px; display: grid; } #son { background-color: tomato; margin: auto; } </style> </head> <body> <div class="box"> <div id="son">我是水平居中元素</div> </div> </body> </html>
(4)使用grid布局，给父元素设置display:grid和justify-content:center、align-content:center
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: skyblue; width: 500px; height: 500px; display: grid; justify-content:center; align-content: center; } #son { background-color: tomato; } </style> </head> <body> <div class="box"> <div id="son">我是水平居中元素</div> </div> </body> </html>
(5)使用grid布局，给父元素设置display:grid和justify-items:center、align-items:center
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: skyblue; width: 500px; height: 500px; display: grid; justify-items:center; align-items: center; } #son { background-color: tomato; } </style> </head> <body> <div class="box"> <div id="son">我是水平居中元素</div> </div> </body> </html>
(6)使用grid布局，给父元素设置display:grid,子元素设置justify-self:center、align-self:center
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: skyblue; width: 500px; height: 500px; display: grid; } #son { background-color: tomato; justify-self:center; align-self: center; } </style> </head> <body> <div class="box"> <div id="son">我是水平居中元素</div> </div> </body> </html>
（7)使用定位，给父元素设置position:relative，给子元素设置position:absolute，top和left为50%,transform:translate(-50%,-50%)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: skyblue; width: 500px; height: 500px; position: relative; } #son { background-color: tomato; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); } </style> </head> <body> <div class="box"> <div id="son">我是水平居中元素</div> </div> </body> </html>
(8)将父元素设置display:table-cell和text-align:center及vertical-align:middle，给子元素设置display:inline-block
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: skyblue; width: 500px; height: 500px; display: table-cell; vertical-align: middle; text-align: center; } #son { background-color: tomato; display: inline-block; } </style> </head> <body> <div class="box"> <div id="son">我是水平居中元素</div> </div> </body> </html>
（9)使用定位，给父元素设置position:relaive，子元素设置position:absolute,其top、right、left、bottom均为0，margin:auto。（ps：子元素必须设置宽高）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: skyblue; width: 500px; height: 500px; position: relative; } #son { background-color: tomato; left:0; top:0; right: 0; bottom: 0; margin: auto; width:100px; height: 100px; position:absolute; } </style> </head> <body> <div class="box"> <div id="son">我是垂直水平居中元素</div> </div> </body> </html>
(10)使用定位，给父元素设置position:relative，子元素设置position:absolute，让其left、top为父元素一半，margin-left为子元素宽度一半的负值，margin-top为子元素高度一半的负值。（ps：子元素必须设置宽度、高度）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box { background-color: skyblue; width: 500px; height: 500px; position: relative; margin: 0 auto; } #son { background-color: tomato; left:250px; top:250px; width:100px; height: 100px; position:absolute; margin-left:-50px; margin-top:-50px; } </style> </head> <body> <div class="box"> <div id="son">我是垂直水平居中元素</div> </div> </body> </html>
效果图：
参考来源：https://blog.csdn.net/weixin_37580235/article/details/82317240
https://static.xiedaimala.com/xdml/file/f40ceb64-df08-4420-9226-7f76dbff15d5/2019-11-22-11-47-37.pdf