使用display:table进行垂直居中
Posted Newbies
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用display:table进行垂直居中相关的知识，希望对你有一定的参考价值。
这个问题，属于常识性的吧，可以了解了解。demo如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table-cell垂直居中</title> <style type="text/css"> *{margin:0;padding:0;border:0;} body,html{width:100%;height:100%;} .ston_wrap{width:100%;height:100%;display: table;} .ston_box{width:600px;margin:0 auto;height: 100%;} .ston_content{display: table-cell;vertical-align: middle;background: #fcc;border:1px solid #fff;} </style> </head> <body> <div class="ston_box"> <div class="ston_wrap"> <div class="ston_content"> <h1>内容1</h1> <h1>内容2</h1> <h1>内容3</h1> <h1>内容4</h1> <h1>内容5</h1> <h1>内容6</h1> <h1>内容7</h1> <h1>内容8</h1> <h1>内容9</h1> <h1>内容1</h1> </div> </div> </div> </body> </html>
以上是关于使用display:table进行垂直居中的主要内容，如果未能解决你的问题，请参考以下文章
display:table和display:table-cell的妙用