文本居中

文本居中分两种：水平居中，垂直居中。水平居中很好实现 ，text-align:center;就实现了水平居中，垂直居中实现的思路比较多，举几个例子：

例子1.

对于单行文本最简单的垂直居中就是利用line-height，首先，定义整个div的高度，然后再设置line height 的值等于div高度，这样就实现了单行文本的居中效果。

例子2.

<div id="parent">

<img src="image.png" alt="" />

</div>

对于图片垂直居中可以利用css的vertical-align:middle实现

实现代码：

#parent {

line-height :200px;

}

#parent img{

vertical-align:middle;

}

例子3.

整个div 居中

<div id="parent">

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

</div>

让iid为child的div 居中实现代码：

#parent{display:table;}

#child {

display:table-cell;

vertical-align:middle;

}

注：display:table-cell;IE8以下不支持。

IE8以下的浏览器可以使用

#child{

display:inline-block;

}

例子4.针对div块级元素，可以使用下面的方法实现垂直居中

代码：

<div id="parent">

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

</div>

css代码：

#parent{

position:relative;}

#child {

positon:absolute;

top:50%;

left:50%;

height:30%;

width:50%;

margin:-15% 0 0 -25%;

}

设置父级position为relative；子元素postion为absolute；同时设置子元素的top为50%，水平也想居中的话，就设置left为50%