/* top:50% margin-top:-35px */
.wrap{
height: 200px;
width: 200px;
border: 4px solid #BBBBBB;
position: relative;
}
.inner{
position:absolute;
height: 70px;
width: 120px;
background-color: #FFBFBF;
top:50%;
margin-top:-35px;
}
<div class="wrap">
<div class="inner"></div>
</div>
//==============================================================================//==============================================================================
/* td{vertical-align: middle;}*/
td{
vertical-align: middle;
border: 4px solid #BBBBBB;
height: 200px;
width: 200px;
}
.tddiv{
height: 70px;
width: 120px;
background-color: #FFBFBF;
}
<table>
<tr>
<td><div class="tddiv"></div></td>
</tr>
</table>
//==============================================================================
//==============================================================================
/*div { display:table; }
p{ display:table-cell; vertical-align:middle; }
*/
.wrap2{
display:table;
height: 200px;
width: 200px;
border: 4px solid #BBBBBB;
}
.inner2{
display:table-cell;
vertical-align: middle;
}
<div class="wrap2">
<p class="inner2">content</p>
</div>
//==============================================================================
//==============================================================================
/*多一层。内 .hack 层 top:50%; 再让 .cnt 层相对自身向上提50%*/
.wrap3{
height: 200px;
width: 200px;
border: 4px solid #BBBBBB;
position: relative;
}
.hack{
position:absolute;
height: 70px;
width: 120px;
background-color: #FFBFBF;
top:50%;
}
.inner3{
height: 70px;
width: 120px;
background-color: #82E0FF;
position: absolute;
top:-50%;
}
<div class="wrap3">
<div class="hack">
<div class="inner3"></div>
</div>
</div>
//参考自:http://sofish.de/1909
分享到:
相关推荐
div框水平垂直居中跟内容垂直居中
图片水平垂直居中 用很精简的代码,实现图片水平垂直居中 效果
继承系统的TextBox,支持文字垂直居中;自动折行(即WordWrap = True)也支持垂直居中。
VB文本垂直居中,主要是为了补TEXTBOX不能垂直居中的不足
垂直居中显示ie7+
CSS解决未知高度的DIV垂直居中CSS解决未知高度的DIV垂直居中
大多数文本框中文字都垂直靠上,很不美观,该控件使文字垂直居中。
教你如何把Winform TextBox 垂直居中的类文件 京华志&精华志出品 希望大家互相学习,互相进步 支持CSDN 支持微软
position: absolute,display:table-cell,display:flex四种垂直居中的方法
VCenterEdit一个比较完美的文本垂直居中的CEdit类。该类来源于网络上的CVEdit类,加入了处理ReadOnly栏目的代码,构成一个比较实用的VCenterEdit一个比较完美的文本垂直居中的CEdit类。供大家参考交流。经测试,可以...
textbox垂直居中,使用了Panel,让其在Panel垂直居中,已经继承了大量TEXTBOX的方法了,如果不够用自己加!
CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx
pb数据窗口美化,pb12.5源码,数据窗口字体垂直居中,自定义grid类型线条颜色
该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
图片水平垂直居中 好用 图片水平垂直居中 图片水平垂直居中 图片水平垂直居中
CEdit框字体垂直居中
CSS实现完美垂直居中 - 蓝色理想
DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中
易语言文本垂直居中源码,文本垂直居中,偏移矩形_,SendMessage