总结一下居中的一系列问题:
(1)单行文本垂直居中
设置行高:line-height
(2)垂直居中一张图片
设置行高:
<div id="parent"> <img src="img.png"> </div> <style>
#parent{
line-height:200px; } #parent img{ vertical-align:middle }
</style>
利用css,table布局的方式:(假如一个页面中既有单行数据,又有多行的数据,此时设置行高,或者padding的方法都会行不通,此时利用display:table的方法就很完美了)
<div id="parent"> <div id="child">Content here</div> </div> <style> #parent {display: table;} #child { display: table-cell; vertical-align: middle; } </style>
利用定位的方法:
#parent {position: relative;} #child { position: absolute; top:50%; left:50%; 50%; height: 50%; margin: -25% 0 0 -25%; }