div垂直居中的方法

1、div中单行文字的垂直居中

在div中单行的文字需要垂直居中时,只需要对所在的div添加行高line-height等于div的高度,并添加overflow:hidden防止因为防止内容超出容器或者产生自动换行,从而使垂直居中失效

<style type="text/css">

div {

height:100px;

line-height:100px;

overflow:hidden;

}

</style>

2、多行未知高度文字的垂直居中

如果div的高度是可变的那么我们就可以设置一个padding值,试使div的上下padding值相等即可,这样就可以使文字看起来像是被垂直居中了一样。

<style type="text/css">

div {

padding:30px;

{

</style>

3、多行文本固定高度的居中

CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display属性能够模拟,所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了(vertical-align的值是middle,而水平居中align的值是center)。注意,display:table和 display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素。(该方法在Internet Explorer 6及以下的版本中是无效的)

<style type="text/css">

div#wrap {

height:400px;

display:table;

}

div#content {

vertical-align:middle;

display:table-cell;

border:1px solid red;

background-color: yellow;

width:760px;

{

</style>

4、知道div的高度

要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半。

<style type="text/css">

.div{

width:300px;

height:200px;

position:absolute;

left:50%;

top:50%;

margin:-100px 0 0 -150px

}

</style>


推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,535评论 1 91
  • div水平居中的N种方法 一、单行垂直居中 如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它...
    fredah阅读 3,935评论 0 1
  • 垂直居中作为一个常见布局形式,或多或少的会给不熟悉页面布局的人带来困扰,这里参考Steven Bradley总结的...
    留七七阅读 2,132评论 6 18
  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 7,302评论 3 30
  • 20多天没动笔了,还是要拾起来好好写点东西。练习了3个多月的写作,虽然没有特别大的进步,但还是有一点长进,至少现在...
    麻雀之泪阅读 76评论 0 0
  • 前几日,高中班级的QQ群里,某位同学上传了一段音频文件,是当时的语文老师临近下课的一段讲话,时长大约1分多钟,当时...
    陆行鸟阅读 597评论 0 1
  • 站在坟头看电影 文/王牧滋 坐在或站在坟头上观看露天电影,这样的稀奇事你听说过吗?你经历过吗?在我很小的时侯,就跟...
    石桥广角阅读 641评论 2 3
  • 2017年6月1号 星期四 天气晴 二年级二班吕紫萱妈妈 盼望已久的的儿童节终于到了!早上女儿早早醒了叫我...
    紫萱妈咪阅读 77评论 1 4
  • 又是阴郁的一天,闷闷热热的很不舒服,早晨起了很早出去晨练,才知道今天是鬼节,路上很多车,都是去上坟,我们这边都叫上...
    阿bu呦阅读 162评论 1 2