首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

怎么实现css垂直居中

2013-09-06 
如何实现css垂直居中利用CSS让元素垂直居中是个很头疼的问题,这里就介绍两种简单实用的方法方法一:利用行

如何实现css垂直居中

利用CSS让元素垂直居中是个很头疼的问题,这里就介绍两种简单实用的方法

方法一:利用行高(line-height)定位

line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是250px,如果将文字的行高设为500px,并且外面的容器的高度也为500px,同样可以实现垂直居中,但是用它来实现垂直居中,也是有缺点的,就是如果内容过多,文字就会跑到下一行,那么内容就不可能垂直居中了。

HTML代码:

1.body {2.        margin: 0;3.        padding: 0;4.        background: #1d1d1d;5.        font-size: 10px;6.        font-family: Verdana, Arial, Helvetica, sans-serif;7.}8.h1 {9.        font: 4em Georgia, "Times New Roman", Times, serif;10.        color: #fff;11.        border-bottom: 5px dotted #999;12.        margin: 0;13.        padding: 0 0 10px;14.}15.h1 span {16.        font-weight: bold;17.        display:block;18.        font-size:1.5em;19.        color: #fff000;20.}21.p {22.        font-size: 1.3em;23.        color: #999;24.}25.strong {26.        color: #fff;27.}28..vert {29.        width: 580px;30.        height: 190px;31.        position: absolute;32.        top: 50%;33.        left: 50%;34.        margin: -95px 0 0 -290px;35.}




2楼lilongsheng11254天前 21:44
学习一下,调整页面的布局也是头疼的事。
1楼wwwwenhuan4天前 17:30
很基础,但也很重要

热点排行