不定高垂直居中

方法1:通过添加display:table-cell实现

 1 .content{
 2     width: 100%;
 3     border: 1px solid red;
 4     min-height: 300px;
 5     text-align: center;
 6     display: table;
 7 }
 8 .content .con1{
 9     display: table-cell;
10     vertical-align: middle;
11 }
12 <div class="content">
13     <div class="con1">
14         <img src="1.jpg" />
15     </div>
16 </div>

方法2:通过添加position实现

.content{
    width: 100%;
    border: 1px solid red;
    min-height: 300px;
    text-align: center;
    position: relative;
}
.content .con2{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}

<div class="content">
    <img class="con2" src="1.jpg" />
</div>
时间: 2024-10-24 10:04:13

不定高垂直居中的相关文章

关于内容垂直居中(不定高)

css样式实现内容的垂直居中: 一:不定高 1:存在兼容性问题,低版本的火狐,对于display:flex的不兼容 display:flex; justify-content:center; align-items:center; 2:同样存在兼容性问题 display: table-cell: vertical-align: middle: 3: top: 50%: transform: translateY(-50%): http://blog.csdn.net/freshlover/art

不定宽高垂直居中分析

昨天做移动项目是,遇到这样一个案例,如图,图片容器随着视口宽度进行自由拉伸扩张,图片不定宽高,垂直居中: 当时做这个布局的时候,我一直想到用display:table-cell通过vertical-align:middle,来实现居中,可以当我在同一个节点用position:absolute,会导致此居中问题失效. 最后想到的解决方案,案例如下,不定宽高垂直居中: <!DOCTYPE HTML> <html lang="en-US"> <head>

图片 + 未知宽高 + 垂直居中

图片 + 未知宽高 + 垂直居中 第一种: table-cell / inline-block + vertical-align条件: 容器宽高受图片默认宽高影响html结构: <div> <img src="./image.jpg" > </div> css代码: div { display: inline-block; /*display: table-cell;*/ padding: 10px; border: 2px solid #aaa;

css不定高图文垂直居中的三种方法

html部分 <div class="box"> <img class="img" src="http://p2.so.qhmsg.com/bdr/_240_/t0196d3945287174d27.jpg" alt=""> <span class="text">111111111</span> </div> css部分 /*方法1:table-c

div表格定高垂直居中,水平居中

近日做项目,遇到一个难题:就是用div ul li 做表格时,要不就是水平居中不了,要不是垂直居中不来 垂直居中用vertical-align: middle;,但是浮动把它给无效化了 因为定高,所以用不了行高 如何解决垂直居中呢? 就是在li里面加一个标签 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" con

不定高度垂直居中

父元素高度固定,子元素高度不固定,要求子元素垂直居中于父元素 方法一: <div class="wrapper"> <div class="content">keleyi.com</div></div> 相对应的css代码如下:.wrapper{  height:400px;  display:table; } .content{ display:table-cell;  vertical-align:middle; 

网页元素居中攻略记_(5)未知元素宽高垂直居中

题外话 以前,我们要自适应全局居中,需要借助JS或者JQ来实现,现在有了CSS3就可以省去好多功夫了,为什么这么说!! 请看比较: 传统的绝对居中 #container{ position:abosolute; top:50%; left:50%; margin-left:-包含块宽度的一半(如 -300px ); margin-top: -包含块高度的一半; } 这种是实现了包含块的绝对居中,但是有一个问题,就是宽高度无法自适应(需固定宽高)-比如动态增加数据的时候,用这个就不大合适了-.这时

不定高元素的高度transition动画实现

分析文档描述 CSS 支持动画的属性中的 height 属性如下: height :yes, as a length, percentage or calc() 即:当 height 的值是 length,百分比或 calc() 时支持 CSS3 过渡. 所以当元素 height : auto 时,是不支持 CSS3 动画的. 解决办法 一.使用max-height属性代替height实现过渡效果 div{ max-height: 0; transition: max-height .5s; }

不定宽的图片水平垂直居中

如何让不定高和不定宽的图片水平垂直居中在某一个定高定宽的容器中呢,请听我细细到来. 现在有很多浏览器(如chrome,部分ie,firefox,opera等)都支持display:table,display:table-cell,让图片水平垂直居中就很简单了,给外部容器加一个display:table和vertical-align:middle,text-align:center属性,图片给display:table-cell属性,就可以实现水平垂直居中. 当然,并不是所有的浏览器(如ie6,等