css 元素垂直居中的问题

1> 图片元素和单行文本只需设置父元素line-height的高度和父元素自身高度一致,图片设置

vertical-align: middle;

就可以了.

2 .方法一 块级元素如何垂直居中

html

<div id="parent">
<div id="child">Content here</div>
</div>

       css

#parent{width: 500px;height: 500px;background-color: yellow;position: relative;}

#child{width: 200px;height: 300px;background-color: red;display: inline-block;vertical-align: middle;position: absolute;left: 50%;top: 50%;margin: -150px 0 0 -100px;}

 主要是利用定位和 margin 可以设为负值,如果宽高为百分比的话 一样的,对半取值

方法二

父元素设置line-heigh 子元素打成行列快,vertical-align: middle;