常见垂直居中方式
小伙伴们经常用margin：0 auto进行水平居中，但是margin： auto；却不能垂直水平居中，下面我们来看看大家是怎么玩的：
PS：实例中多写了一些代码，容易观察。
一、容器内居中：下面的代码一试就懂；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flexbox</title> <style type="text/css"> body{ height: 2000px; } .container{ border: 2px solid green; height: 500px; position: relative; } .center{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 50%; height: 50%; border: 2px solid blue; overflow: hidden; } </style> </head> <body> <div class="container"> <div class="center fixed"> Content </div> </div> </body> </html>
二、视图内居中，一般用作提示框，登录框等；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flexbox</title> <style type="text/css"> body{ height: 2000px; } .container{ border: 2px solid green; height: 500px; position: relative; } .center{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 50%; height: 50%; border: 2px solid blue; overflow: hidden; } .center.fixed{ z-index: 999; position: fixed; } </style> </head> <body> <div class="container"> <div class="center fixed"> Content </div> </div> </body> </html>
三、靠左或者靠右
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flexbox</title> <style type="text/css"> .container{ border: 2px solid green; height: 500px; position: relative; } .center{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 50%; height: 50%; border: 2px solid blue; overflow: hidden; } .center.is-right{ /* 靠左也一样 */ left: auto; right: 20px; text-align: right; } </style> </head> <body> <div class="container"> <div class="center is-right"> Content </div> </div> </body> </html>
四、自适应/响应式居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flexbox</title> <style type="text/css"> .container{ border: 2px solid green; height: 500px; position: relative; } .center{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 50%; height: 50%; border: 2px solid blue; overflow: hidden; } .center.responsive{ width: 60%; height: 60; min-width: 200px; max-width: 400px; } </style> </head> <body> <div class="container"> <div class="center responsive">content</div> </div> </body> </html>
一定要注意不要让内容区内容超出，如果内容块自身不设置任何padding的话，可以设置max-height: 100%;来保证内容高度不超越容器高度。上面的示例代码中都没有添加over-flow：hidden；
五、重绘居中：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flexbox</title> <style type="text/css"> .container{ border: 2px solid green; height: 500px; position: relative; } .center{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 50%; height: 50%; border: 2px solid blue; } .center.responsive{ min-width: 20%; max-width: 80%; min-height: 20%; max-height: 80%; resize: both; overflow: auto; } /* 如果不使用resize:both属性，可以使用CSS3动画属性transition来实现重绘的窗口之间平滑的过渡。一定要设置overflow:auto;以防重绘的内容块尺寸小于内容的实际尺寸这种情况出现。 绝对居中（AbsoluteCentering）是唯一支持resize:both属性实现垂直居中的技术。 */ </style> </head> <body> <div class="container"> <div class="center is-resizable">content</div> </div> </body> </html>
六、不定高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flexbox</title> <style type="text/css"> .container{ border: 2px solid green; height: 500px; position: relative; } .center{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 50%; height: 50%; border: 2px solid blue; } .center{ display: table; height: auto; } </style> </head> <body> <div class="container"> <div class="center">content</div> </div> </body> </html>
其他方法：
一、负外边距法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flexbox</title> <style type="text/css"> body{ height: 2000px; } .container{ border: 2px solid green; height: 500px; position: relative; } .center{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 50%; height: 50%; border: 2px solid blue; } .center{ width: 300px; height: 200px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -170px; /* (width + padding)/2 */ margin-top: -120px; /* (height + padding)/2 */ } </style> </head> <body> <div class="container"> <div class="center">content</div> </div> </body> </html>
二、变形法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flexbox</title> <style type="text/css"> .container{ border: 2px solid green; height: 500px; position: relative; } .center{ border: 2px solid red; } .center{ width: 50%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } </style> </head> <body> <div class="container"> <div class="center">content</div> </div> </body> </html>
三、table-cell居中法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flexbox</title> <style type="text/css"> div{ width: 170px; height: 100px; display: table; text-align: center; border: 1px solid red; } span{ display: table-cell; vertical-align: middle; border: 1px solid blue; } </style> </head> <body> <div id="demo"> <span>content</span> </div> </body> </html>
四、inline-block居中法:据说兼容性相当好
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flexbox</title> <style type="text/css"> #demo{ height:100px; text-align:center; font-size:0; background-color: #eee; } #demo:after,#demo span{ display:inline-block; *display:inline; *zoom:1; width:0; height:100%; vertical-align:middle; } #demo:after{ content:''; } #demo p{ display:inline-block; *display:inline; *zoom:1; vertical-align:middle; font-size:16px; } </style> </head> <body> <div id="demo"> <p>这是一个终极实现的水平垂直居中实例</p> <!--[if lt IE 8]><span></span><![endif]--> </div> </body> </html>
五、flex-box居中法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flexbox</title> <style type="text/css"> .container{ height: 500px; width: 100%; background-color: #eee; display: flex; justify-content: center; align-items: center; } .content{ width: 50%; height: 50%; background-color: green; } </style> </head> <body> <div class="container"> <div class="content">content</div> </div> </body> </html>
