标签：
1.已知宽度高度，绝对定位之负边距margin
<style> .absolute-center{ position:absolute; width:100px; height:100px; left:50%; top:50%; margin:-50px 0 0 -50px; border:1px solid #ddd; background-color:red; } </style> </head> <body> <div class="absolute-center"> 绝对定位<br> 垂直居中<br> </div> </body>
2.line-height 方式，适用于文本居中
<style type="text/css"> .container{ width: 200px; height: 100px; line-height: 100px; background-color:#ddd; } </style> </head> <body> <div class="container"> 我是line-height </div>
3.Inline-block
<style> html,body,.outer{ height:100%; } .outer{ border:1px solid red; text-align:center; } .outer:after{ content:‘‘; display:inline-block; vertical-align:middle; height:100%; } .inner{ background-color:#f0f0f0; display:inline-block; resize:both; overflow:hidden; } </style> </head> <body> <div class="outer"> <div class="inner"> 我垂直居中 </div> </div> </body>
标签：
原文地址：http://www.cnblogs.com/lengkafei/p/5605289.html
