方法一：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin: 0; padding: 0; } #wrap { width: 500px; height: 500px; background: grey; /* #box的父级相对定位（为了box) */ position: relative; } #box{ width: 200px; height: 200px; background: deeppink; /* box绝对定位 */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; } </style> </head> <body> <div id="wrap"> <div id="box"></div> </div> </body> </html>
方法二：
已知盒子宽高（利用盒子宽高，当盒子宽高改变会要求代码相应改变）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin: 0; padding: 0; } #wrap { width: 500px; height: 500px; background: grey; position: relative; } #box{ width: 200px; height: 200px; background: deeppink; position: absolute; top: 50%; left: 50%; /* 已知box盒子宽高所采取的以下完美居中调整 */ margin-top: -100px; margin-left: -100px; } </style> </head> <body> <div id="wrap"> <div id="box"></div> </div> </body> </html>
方法三：
已知盒子宽高（不会因为盒子宽高改变受影响）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin: 0; padding: 0; } #wrap { width: 500px; height: 500px; background: grey; position: relative; } #box{ width: 200px; height: 200px; background: deeppink; position: absolute; top: 50%; left: 50%; /* 使box盒子自身上移50%；左移50%；完成完美居中 */ transform: translate(-50%,-50%); } </style> </head> <body> <div id="wrap"> <div id="box"></div> </div> </body> </html>
方法四：
最新的，最好的
flex元素水平垂直居中(新)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin: 0; padding: 0; } #wrap { width: 500px; height: 500px; background: grey; /* 伸缩盒子*/ display: flex; /* 子元素水平居中*/ justify-content: center; /* 子元素垂直居中*/ align-items: center; } #box{ width: 200px; height: 200px; background: deeppink; } </style> </head> <body> <div id="wrap"> <div id="box"></div> </div> </body> </html>
方法五：
flex元素水平垂直居中(老)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin: 0; padding: 0; } #wrap { width: 500px; height: 500px; background: grey; /* 子元素盒子改变为灵活盒子，水平垂直居中 */ display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; } #box{ width: 200px; height: 200px; background: deeppink; } </style> </head> <body> <div id="wrap"> <div id="box"></div> </div> </body> </html>
