不固定高度和宽度的div,水平和垂直居中
不固定高度和宽度的div,水平和垂直居中
在写页面时,经常会遇到一个不固定高度和宽度的div,但又要水平或者垂直居中,有点XX
水平居中
对于水平居中,我知道的有2个办法,根据具体情况来选择
- 第一个是父元素的宽高固定,子元素设置成块(display:block;),然后利用外边距(margin:0 atuo;)来水平居中
具体代码如下
//css <style> .container{ height: 300px; border: 1px solid #cccccc; } .mid{ margin: 0 auto; background-color: #cccccc; height: 50px; width: 50px;
<span class="kw">}</span>
</style>
//html <body> <div class="container"> <div class="mid"> </div> </div> </body>
- 第二个是父元素的宽高固定,父元素添加css(text-align: center;),子元素设置成行内元素(display:inline-block;)
具体代码如下
//css <style> .container{ height: 300px; border: 1px solid #cccccc; text-align: center; } .mid{ background-color: #cccccc; height: 50px; width: 50px; display: inline-block;
<span class="kw">}</span>
</style>
//html <body> <div class="container"> <div class="mid"> </div> </div> </body>
垂直居中
对于垂直居中,要用到(vertical-align:middle;),而且还要用到一个辅助的元素
- 父元素不变,子元素1设置成行内元素并添加(vertical-align:middle;),另外在加一个同级子元素2,用来撑开子元素1
具体代码如下
//css <style> .container{ height: 300px; border: 1px solid #cccccc; } .mid{ background-color: #cccccc; height: 50px; width: 50px; vertical-align:middle; display:inline-block;
<span class="kw">}</span> <span class="fl">.mid-hack</span> <span class="kw">{</span> <span class="kw">display:</span> <span class="dt">inline-block</span><span class="kw">;</span> <span class="kw">font-size:</span> <span class="dt">0</span><span class="kw">;</span> <span class="kw">height:</span> <span class="dt">100%</span><span class="kw">;</span> <span class="kw">vertical-align:</span> <span class="dt">middle</span><span class="kw">;</span> <span class="kw">width:</span> <span class="dt">0</span><span class="kw">;</span> <span class="kw">}</span>
</style>
//html <body> <div class="container"> <div class="mid"> </div> <div class="mid-hack"> </div> </div> </body>
当然肯定还有其他办法,有知道的欢迎指点