Div+CSS教程

关注公众号 jb51net

关闭
网页制作 > CSS > Div+CSS教程 >

不固定宽度和高度的情况下CSS调整div居中的方法总结

Aaron

很多新手在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示。
如果div有固定宽度的话,用padding,margin都很容易实现。方法有很多种。不过经常遇到这种div没有固定的宽度高度的情况,我们就不能用margin,padding设置固定的距离了。这个问题让很多人头疼。而怎么样才能让这个div居中显示呢?其实这种情况解决的办法也是有很多种,js,css都可以实现。
这里主要介绍一下采用css的方法,有什么问题还请各位看官指出。

方法一:
用一个“ghost”伪元素(看不见的伪元素)和 inline-block / vertical-align 可以搞定居中,非常巧妙。但是这个方法要求待居中的元素是 inline-block,不是一个真正通用的方案。
html如下:

XML/HTML Code复制内容到剪贴板
  1. <div class="block" style="height: 300px;">  
  2.     <div class="centered">  
  3.         <h1>haorooms案例题目</h1>  
  4.         <p>haorooms案例内容,haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容</p>  
  5.     </div>  
  6. </div>  

css如下:

CSS Code复制内容到剪贴板
  1. /* This parent can be any width and height */  
  2. .block {   
  3.   text-aligncenter;   
  4. }   
  5. /* The ghost, nudged to maintain perfect centering */  
  6. .block:before {   
  7.   content'';   
  8.   displayinline-block;   
  9.   height: 100%;   
  10.   vertical-alignmiddle;   
  11.   margin-right: -0.25em; /* Adjusts for spacing */  
  12. }   
  13. /* The element to be centered, can  
  14.    also be of any width and height */    
  15. .centered {   
  16.   displayinline-block;   
  17.   vertical-alignmiddle;   
  18.   width: 50%;   
  19. }  

方法二:
可以用table布局方法,但是这种方法也有局限性!
写法如下:

XML/HTML Code复制内容到剪贴板
  1. <table style="width: 100%;">  
  2.   <tr>  
  3.      <td style="text-align: center; vertical-align: middle;">  
  4.           Unknown stuff to be centered.   
  5.      </td>  
  6.   </tr>  
  7. </table>  

由于table写法比较费时,你也可以用div代替table,写法如下:
html:

XML/HTML Code复制内容到剪贴板
  1. <div class="something-semantic">  
  2.    <div class="something-else-semantic">  
  3.        Unknown stuff to be centered.   
  4.    </div>  
  5. </div>  

css:

CSS Code复制内容到剪贴板
  1. .something-semantic {   
  2.    display: table;   
  3.    width: 100%;   
  4. }   
  5. .something-else-semantic {   
  6.    displaytable-cell;   
  7.    text-aligncenter;   
  8.    vertical-alignmiddle;   
  9. }  

方法三,终极解决方法:
以上2中方法可能都有其局限性,我介绍的第三中方法是比较成熟的不是固定高宽div的垂直居中的方法!但是方法是css3的写法,想兼容IE8的童鞋们,建议用上面的方法!
方法和我们固定高宽的差不多,但是不用margin我们用的是 translate()
demo如下:

CSS Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">   
  3. <head>   
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">   
  5.     <title>haorooms不固定高度div写法</title>   
  6.     <style>   
  7. .center {   
  8.   positionfixed;   
  9.   top: 50%;   
  10.   left: 50%;   
  11.   background-color#000;   
  12.   width:50%;   
  13.   height: 50%;   
  14. -webkit-transform: translateX(-50%) translateY(-50%);   
  15. }   
  16.     </style>   
  17. </head>   
  18. <body>   
  19.     <div class="center"></div>   
  20. </body>   
  21. </html>  

我上面的css只是针对webkit内核的浏览器,其他内核浏览器写法如下:

CSS Code复制内容到剪贴板
  1. -webkit-transform: translateX(-50%) translateY(-50%);   
  2. -moz-transform: translateX(-50%) translateY(-50%);   
  3. -ms-transform: translateX(-50%) translateY(-50%);   
  4. transform: translateX(-50%) translateY(-50%);  

有些弹出层的样式,也可以用这个方法居中

CSS Code复制内容到剪贴板
  1. positionfixed;   
  2. top: 50%;   
  3. left: 50%;   
  4. width: 50%;   
  5. max-width630px;   
  6. min-width320px;   
  7. heightauto;   
  8. z-index: 2000;   
  9. visibilityhidden;   
  10. -webkit-backface-visibilityhidden;   
  11. -moz-backface-visibilityhidden;   
  12. backface-visibilityhidden;   
  13. -webkit-transform: translateX(-50%) translateY(-50%);   
  14. -moz-transform: translateX(-50%) translateY(-50%);   
  15. -ms-transform: translateX(-50%) translateY(-50%);   
  16. transform: translateX(-50%) translateY(-50%);  

无固定高度的div垂直居中代码要点:
父容器vc的css属性 display:table;overflow:hidden;
子容器vci的css属性 vertical-align:middle;display:table-cell;
针对ie6的hack,vci容器的 _position:absolute;_top:50%; 和content容器的 _position:relative; _top:-50%;