文本居中分两种:水平居中,垂直居中。水平居中很好实现 ,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%