不定高度垂直居中

父元素高度固定，子元素高度不固定，要求子元素垂直居中于父元素

方法一：

<div class="wrapper">
　　<div class="content">keleyi.com</div>
</div>

相对应的css代码如下：
.wrapper{
　　height:400px;
　　display:table;
}
.content{

　　display:table-cell;
　　vertical-align:middle;
　　border:1pxsolid#FF0099;
　　width:760px;
}

父元素高度不固定，子元素高度不固定，要求子元素垂直居中于父元素

时间： 2024-10-09 00:29:14

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

css实现高度垂直居中

1:单行文字垂直居中: 如果一个容器中只有一行文字的话,定义height(高度)和 line-height(行高)相等即可. 如:<div style="height:25px;line-height:25px;overflow:hidden">aa</div> 2:多行文本固定高度垂直居中: 核心:display:table 和display:table-cell ;vertical-align:middle; 兼容:ie7+ 1 <div class=

不定高度实现垂直居中（兼容低版本ie）

css实现垂直居中的方法比较多,但是每种方法的缺陷也很明显,我尝试对其中一种方法进行了改良先看原方法: <div class="parent"> <div class="child"></div> </div> .parent{ width:500px; height:500px; position:relative; } .child{ width:100px; height:100px; position:abs

css不定高度实现垂直居中

1.不知道自己高度和父容器高度的情况下, 利用绝对定位只需要以下三行: parentElement{ position:relative; } childElement{ position: absolute; top: 50%; transform: translateY(-50%); } 2.若父容器下只有一个元素,且父元素设置了高度,则只需要使用相对定位即可 parentElement{ height:xxx; } .childElement { position: relative; t

不定高度内容垂直居中

效果: html:<div id="demo"> <div class="box1"> <div class="box2">一旦你娶了中国太太,就等于娶了她全家,不到半年,她爹.她妈.她二姐.她二姐的孩子就排着队全来了……我好端端的一个美国家庭,一眨眼工夫,就被中国人给占领了.</div> </div></div> css:#demo { di

CSS解决未知高度垂直居中

尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下). 标准浏览器如Mozilla, Opera, Safari等.,可将父级元素显示方式设定为TABLE(display: table;) ,内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中,但非标准浏览器是不支持的. 非标准浏览器只能在子元素里设距顶部50%,里面再套个元素距顶部

如何为什么不定高度的元素添加CSS3 transition

但一个元素不设置height时,它的默认值是 auto,浏览器会计算出实际的高度. 但如果想给一个 height:auto 的块级元素的高度添加 CSS3 动画时,该怎么办呢? 从 MDN 的可以查到 CSS 支持动画的属性中的 height 属性如下: height :yes, as a length, percentage or calc(); // 当 height 的值是 length,百分比或 calc() 时支持 CSS3 过渡. 所以当元素 height : auto 时,是不支持

不定高度的div背景或背景图片不显示问题

在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常.但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题. 大体结构 <style> .a1 {width:100px;background:red;} .b1 {background:blue;width:50px;height:600px;} </style> </head> <body> <div clas

不定高垂直居中

方法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"

不定宽高垂直居中分析

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