怎么让一个不定宽高的div水平居中，垂直水平居中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么让一个不定宽高的div水平居中，垂直水平居中相关的知识，希望对你有一定的参考价值。
方法其实很多，我给2个我觉得兼容性相对好一些的吧
1、一个很简单粗暴的方法，就是把div放进table里面，给table设置水平居中，而td默认情况内容是垂直居中的，如下：
body,html margin:0; padding:0; height:100%;
.tablebox margin:0 auto; height:100%;
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" class="tablebox">
<tr>
<td>
<div>内容内容内容内容内容内容</div>
</td>
</tr>
</table>
</body>
2、通过绝对定位的50%来达到，但是因为div是有高度宽度的，设置50%就不是绝对的水平垂直居中，所以就要设置transform属性来调整
<style type="text/css">body,html margin:0; padding:0; height:100%;
.divbox01 width:100%; height:100%; position:relative;
.divbox02position:absolute;left:50%; top:50%; transform:translate(-50%,-50%);
</style>
</head>
<body>
<div class="divbox01">
<div class="divbox02">内容内容内容内容</div>
</div>
</body>
其他方法我就懒得说了，我个人常用的就主要是这两个
你好，
你想将盒子居中，
最好是将宽高都写上，就算宽高不固定，也可以写个百分数。但至少要有值，不然居中是没法的。
居中可以通过 margin 或者 定位 或者 弹性盒模型 来进行居中。
不定宽高水平垂直居中
1 <div id="demo"> 2 <p>这是一个终极实现的水平垂直居中实例</p> 3 <!--[if lt IE 8]><span></span><![endif]--> 4 </div> 5 #demo{ 6 height:100px; 7 text-align:center; 8 font-size:0; //注意这里是去除文字间隔，放在内容宽度为100%时挤出换行 9 } 10 #demo:after,#demo span{ 11 display:inline-block; 12 *display:inline; 13 *zoom:1; 14 width:0; 15 height:100%; 16 vertical-align:middle; 17 } 18 #demo:after{ 19 content:‘‘; 20 } 21 #demo p{ 22 display:inline-block; 23 *display:inline; 24 *zoom:1; 25 vertical-align:middle; 26 font-size:16px; 27 }
以上是关于怎么让一个不定宽高的div水平居中，垂直水平居中的主要内容，如果未能解决你的问题，请参考以下文章