CSS实现垂直居中

来源：互联网发布：淘宝网支持的网上银行编辑：程序博客网时间：2024/05/19 01:32

1、最简单的单行文本line-height垂直居中

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>*{margin:0; padding:0;}.box{width:500px; height:300px; border:1px solid red; margin-top:100px; margin-left:200px; text-align:center;}p{line-height:300px;}</style></head><body><div class="box"><p>XXXXXXXXXXXX</p></div></body></html>

2、图片垂直居中，使用line-height和vertical-align:middle

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>*{margin:0; padding:0;}.box{width:500px; height:300px; border:1px solid red; margin-top:100px; margin-left:200px; text-align:center; line-height:300px;}img{vertical-align:middle;}</style></head><body><div class="box"><img src="images/img_27.gif" /></div></body></html>

3、使用table布局，display:table和display:table-cell

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>*{margin:0; padding:0;}.box{width:500px; height:300px; border:1px solid red; margin-top:100px; margin-left:200px; text-align:center; display:table;}p{display:table-cell; vertical-align:middle;}</style></head><body><div class="box"><p>XXXXXXXXXXXXXXXXXXXX</p></div></body></html>

4、绝对居中，使用margin:auto和top、bottom、left、right同设为0

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>*{margin:0; padding:0;}.box{width:500px; height:300px; border:1px solid red; margin-top:100px; margin-left:200px; position:relative;}.box-1{width:50%; height:50%; border:1px solid blue; margin:auto; position:absolute; top:0; bottom:0; left:0; right:0; overflow:auto;}</style></head><body><div class="box"><div class="box-1"></div></div></body></html>

5、使用flex布局，display:flex和justify-content:center水平居中，align-items:center垂直居中

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>*{margin:0; padding:0;}.box{width:500px; height:300px; border:1px solid red; margin-top:100px; margin-left:200px; display:flex; justify-content:center; align-items:center;}.box-1{width:200px; height:100px; border:1px solid blue;}</style></head><body><div class="box"><div class="box-1"></div></div></body></html>

关于flex弹性布局参考链接：

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

6、使用margin负值（缺点是必须知道宽高）

<!DOCTYPE html>  <html>  <head>  <meta charset="utf-8">  <title></title>  <style>  *{margin:0; padding:0;}  .box{width:500px; height:300px; border:1px solid red; margin-top:100px; margin-left:200px; position:relative;}  .box-1{width:200px; height:100px; border:1px solid blue; position:absolute; top:50%; left:50%; margin-left:-100px; margin-top:-50px;}  </style>  </head>  <body>  <div class="box">      <div class="box-1"></div>  </div>  </body>  </html>

7、使用transform:translate(-50%,-50%)，移动端用的较多，可以不用知道宽高

<!DOCTYPE html>  <html>  <head>  <meta charset="utf-8">  <title></title>  <style>  *{margin:0; padding:0;}  .box{width:500px; height:300px; border:1px solid red; margin-top:100px; margin-left:200px; position:relative;}  .box-1{width:200px; height:100px; border:1px solid blue; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);}  </style>  </head>  <body>  <div class="box">      <div class="box-1"></div>  </div>  </body>  </html>

8、使用display:-webkit-box，设置-webkit-box-pack:center和-webit-box-align:center;

<!DOCTYPE html>  <html>  <head>  <meta charset="utf-8">  <title></title>  <style>  *{margin:0; padding:0;}  .box{width:500px; height:300px; border:1px solid red; margin-top:100px; margin-left:200px; display:-webkit-box; -webkit-box-pack:center; -webkit-box-align:center;}  .box-1{width:200px; height:100px; border:1px solid blue;}</style>  </head>  <body>  <div class="box">      <div class="box-1"></div>  </div>  </body>  </html>

关于CSS垂直居中参考链接：

https://www.zhihu.com/question/20543196

http://blog.csdn.net/freshlover/article/details/11579669

0 0