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

前端  /  管理员 发布于 7年前   234

很多新手在写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-align: center;   
  4. }   
  5. /* The ghost, nudged to maintain perfect centering */  
  6. .block:before {   
  7.   content: '';   
  8.   display: inline-block;   
  9.   height: 100%;   
  10.   vertical-align: middle;   
  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.   display: inline-block;   
  17.   vertical-align: middle;   
  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.    display: table-cell;   
  7.    text-align: center;   
  8.    vertical-align: middle;   
  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.   position: fixed;   
  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. position: fixed;   
  2. top: 50%;   
  3. left: 50%;   
  4. width: 50%;   
  5. max-width: 630px;   
  6. min-width: 320px;   
  7. height: auto;   
  8. z-index: 2000;   
  9. visibility: hidden;   
  10. -webkit-backface-visibility: hidden;   
  11. -moz-backface-visibility: hidden;   
  12. backface-visibility: hidden;   
  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%;


  • 上一条：
    详解CSS中的选择器优先级及样式层叠问题解决
    下一条：
    浅谈CSS块级元素与行内元素(内联元素)的区别和联系

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客