您现在的位置是：网站首页> 编程资料编程资料

不固定宽度和高度的情况下CSS调整div居中的方法总结CSS控制div宽度最大宽度/高度和最小宽度/高度的方法CSS设置HTML元素的高度与宽度的各种情况总结兼容IE6的网页最小最大宽度和最小最大高度css写法CSS的最大高度、最小高度及宽度在IE6下没有效果问题CSS控制页面最大最小宽度和高度可兼容IE6版本的实现方法CSS min-height IE6、IE7、FF下DIV自适应高度CSS IE6奇数宽度或高度的bugcss实现一个元素高度固定宽度按比例显示效果

2021-09-05 851人已围观

简介 这里我们来看一下在不固定宽度和高度的情况下CSS调整div居中的方法总结,考虑到了老IE的兼容性,同时也有CSS3的translate属性解决方法介绍,需要的朋友可以参考下

很多新手在写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. "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
  2. "http://www.w3.org/1999/xhtml" xml:lang="en">   
  3.   
  4.     "Content-Type" content="text/html;charset=UTF-8">   
  5.     haorooms不固定高度div写法   
  6.        
  7.   
  8.   
  9.     "center">
  
  •   
  •   

    • 我上面的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%;

    上一篇：Less框架中将CSS强制打包到单个文件中的技巧CSS Less框架基础教程Less里css表达式的写法示例介绍LESSCSS让CSS使用起来更加灵活成就CSS动态化less让css具有动态语言的特性学习CSS预处理器:Sass和less进行对比动态的样式表lesscss:简单学习lesscss语法LESS 让css也支持变量，运算符，include,嵌套规则LESS 让css也支持变量，运算符，include,嵌套规则等等 CSS less优化

    下一篇：详解CSS中的选择器优先级及样式层叠问题解决CSS优先级计算的规则css优先级计算方法(推荐)详解CSS中的选择器优先级顺序CSS z-index 层级关系优先级的概念CSS优先级的两种理解方式

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网