CSS实现垂直居中的5种方法
2015-06-08 13:59
706 查看
使用CSS实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法,以及它们各自的优缺点。
[/code]
因为有固定高度,或许你想给content指定
[/code]
优点:
适用于所有浏览器
不需要嵌套标签
缺点:
没有足够空间时,content会消失(类似div在body内,当用户缩小浏览器窗口,滚动条不出现的情况)
content清除浮动,并显示在中间。
[/code]
优点:
适用于所有浏览器
没有足够空间时(例如:窗口缩小)content不会被截断,滚动条出现
缺点:
唯一我能想到的就是需要额外的空元素了(也没那么糟,又是另外一个话题)
[/code]
优点:
简单
缺点:
IE(IE8beta)中无效
无足够空间时,content被截断,但是不会有滚动条出现
[/code]
优点:
适用于所有浏览器
无足够空间时不会被截断
缺点:
只对文本有效(块级元素无效)
多行时,断词比较糟糕
这个方法在小元素上非常有用,例如使按钮文本或者单行文本居中。
方法一
这个方法把一些div的显示方式设置为表格,因此我们可以使用表格的vertical-alignproperty属性。<divclass="wrapper"> <divclass="cell"> <divclass="content">Contentgoeshere</div> </div> </div>
[/code]
.wrapper{display:table;} .cell{ display:table-cell; vertical-align:middle; } 优点: content可以动态改变高度(不需在CSS中定义)。当wrapper里没有足够空间时,content不会被截断 缺点: InternetExplorer(甚至IE8beta)中无效,许多嵌套标签(其实没那么糟糕,另一个专题)
方法二:
这个方法使用绝对定位的div,把它的top设置为50%,topmargin设置为负的content高度。这意味着对象必须在CSS中指定固定的高度。因为有固定高度,或许你想给content指定
overflow:auto,这样如果content太多的话,就会出现滚动条,以免content溢出。
<divclass="content">Contentgoeshere</div>
[/code]
.content{ position:absolute; top:50%; height:240px; margin-top:-120px;/*negativehalfoftheheight*/ }
优点:
适用于所有浏览器
不需要嵌套标签
缺点:
没有足够空间时,content会消失(类似div在body内,当用户缩小浏览器窗口,滚动条不出现的情况)
方法三
这种方法,在content元素外插入一个div。设置此divheight:50%;margin-bottom:-contentheight;。
content清除浮动,并显示在中间。
<divclass="floater"></div> <divclass="content">Contenthere</div>
.floater{ float:left; height:50%; margin-bottom:-120px; } .content{ clear:both; height:240px; position:relative; }
[/code]
优点:
适用于所有浏览器
没有足够空间时(例如:窗口缩小)content不会被截断,滚动条出现
缺点:
唯一我能想到的就是需要额外的空元素了(也没那么糟,又是另外一个话题)
方法四
这个方法使用了一个position:absolute,有固定宽度和高度的
div。这个
div被设置为
top:0;bottom:0;。但是因为它有固定高度,其实并不能和上下都间距为0,因此
margin:auto;会使它居中。使用
margin:auto;使块级元素垂直居中是很简单的。
<divclass="content">Contenthere</div>
[/code]
.content{ position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:240px; width:70%; }
优点:
简单
缺点:
IE(IE8beta)中无效
无足够空间时,content被截断,但是不会有滚动条出现
方法五
这个方法只能将单行文本置中。只需要简单地把line-height设置为那个对象的height值就可以使文本居中了。<divid="content">Contenthere</div>
[/code]
.content{ height:100px; line-height:100px; }
优点:
适用于所有浏览器
无足够空间时不会被截断
缺点:
只对文本有效(块级元素无效)
多行时,断词比较糟糕
这个方法在小元素上非常有用,例如使按钮文本或者单行文本居中。
相关文章推荐
- 让IE6支持css3,让 IE7、IE8 都支持CSS3
- css定位
- CSS3 icon font
- css sprite、background-size、Retina屏幕详解
- html/css编写规范
- css3属性书写的时候带的一些前缀的意思
- CSS 选择符
- 源码推荐(6.8):带标题、可改变样式的自定义ActionSheet,TYWaterWaveView 水波浪圆形进度
- "portrait"(竖屏) "landscape"(横屏) css设置
- 【code】flex_进度条样式
- CSS Masking(翻译)
- css小知识
- Css浮动的含义和div卡住状况的分析
- CSS3那些不为人知的高级属性
- 用php实现,打开哪个页面哪个页面就有默认的样式
- CSS中的图像替换技术
- 【JS总结】——DOM操作表格和样式
- 如何利用CSS把网页整体变成黑白灰度的
- CSS 导航栏
- CSS 伪元素