css设置自适应高度和垂直居中

发布时间：2020-12-15 00:28:23 所属栏目：C语言来源：网络整理

导读：注：IE盒子模型和标准w3c盒子模型区别(参考：自适应高度第一种：一定高度内容加多时自适应高度，而内容少时DIV有一定最小高度 _height:200px; /* css 注解：仅IE6设别此属性，假定最低高度是200px ，设置高度200px，内容超出后IE6会自动撑高设定高度 */ m

等，而像
、这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用通过display来实现这种方式多行文字实现垂直居中
这里设置一个“#main”对象样式，宽400px,高200px，使用了绝对定位position样式同时使用绝对定位left和top，并且同时设置margin-top和margin-left,为了观察到效果，所以对此div盒子加了个红色边框。这里使用了绝对定位position:absolute，使用left和top设置对象距离上和左为50%，但如果设置50%，实际上盒子是没有实现居中效果，所以又设置margin-left:-200px;margin-top:-100px;，这里有个技巧是，margin-left的值是宽度一半，margin-top的值也是对象高度一半，同时设置为负，这样就实现了水平和垂直居中。
第三种：不固定高度div垂直居中（还没整理）

`参考（http://www.haorooms.com/post/css_div_juzhong）`

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
注：IE盒子模型和标准w3c盒子模型区别(参考：自适应高度第一种：一定高度内容加多时自适应高度，而内容少时DIV有一定最小高度 `_height:200px; /* css 注解：仅IE6设别此属性，假定最低高度是200px ，设置高度200px，内容超出后IE6会自动撑高设定高度 / min-height:200px; / css注释： css最小高度为200px支持所有浏览器，IE6浏览器除外 */` 第二种：没有最小高度，DIV完全自适应高度。第三种：容器嵌套的情况下，而子容器又是浮动的例：内容1 内容1 其中class为fuqin的div有浮动的li，当li比较多的时候，即便是div设置的是最小高度，也无法被撑开。原因就在于作为子容器的li是浮动的即。在这种情况下，即便是li的内容超过了div的高度，div也无法撑开。解决方法如下：在浮动的容器后面，父容器结束之前加入一个div <div class="fuqin"> 内容1 内容1</li> <div class="clearfloat"> .clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;} 第四种：通过position自适应高度 `例：` `.righinfo{ font-family: '华文'; background-color: #f6fffa; border: 1px solid red; padding: 0px; left:0px; right:0px; top:0px; bottom: 0px; position: absolute; text-align: center; } 主要通过position、left、right、top、bottom来设置实现` 垂直居中第一种：CSS中的vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效， `例如表格元素中的、`

注：IE盒子模型和标准w3c盒子模型区别(参考：

自适应高度

第一种：一定高度内容加多时自适应高度，而内容少时DIV有一定最小高度

_height:200px; /* css 注解： 仅IE6设别此属性，假定最低高度是200px ，设置高度200px，内容超出后IE6会自动撑高设定高度 */ 
min-height:200px; /* css注释： css最小高度为200px支持所有浏览器，IE6浏览器除外 */

第二种：没有最小高度，DIV完全自适应高度。

第三种：容器嵌套的情况下，而子容器又是浮动的

例：
内容1
内容1 
其中class为fuqin的div有浮动的li，当li比较多的时候，即便是div设置的是最小高度，也无法被撑开。 
原因就在于作为子容器的li是浮动的即 。在这种情况下，即便是li的内容超过了div的高度，div也无法撑开。 
解决方法如下： 
在浮动的容器后面，父容器结束之前加入一个div 
<div class="fuqin">
内容1
内容1</li&gt;
<div class="clearfloat">

.clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;}

第四种：通过position自适应高度

    例：
  
   
   
    
    .righinfo{
          font-family: '华文';
        background-color: #f6fffa;
        border: 1px solid red;
        padding: 0px;
            left:0px;
        right:0px;
        top:0px;
        bottom: 0px;
        position: absolute;
        text-align: center;
    }
    主要通过position、left、right、top、bottom来设置实现

垂直居中

第一种：CSS中的vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生效，

例如表格元素中的、