小div在大div中垂直居中方式
Posted songtianfa
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小div在大div中垂直居中方式相关的知识,希望对你有一定的参考价值。
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div居中</title> <style> * { margin:0; padding:0; } .content { width:400px; height:400px; background:orange; border: 1px solid green; position:relative; margin: 100px auto; } .nav { width:80px; height:80px; line-height:80px; text-align:center; background:green; margin: auto; position:absolute; left: 0; top: 0; bottom:0; right: 0; } </style> </head> <body> <div class="content"> <div class="nav">这是内容</div> </div> </body> </html>
效果:
以上是关于小div在大div中垂直居中方式的主要内容,如果未能解决你的问题,请参考以下文章