如何让 DIV 中的内容垂直居中

发布于 2019-10-30 22:24:19 字数 2507 浏览 1512 评论 0

虽然 Div 布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项,不 过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果勉强过关。 要让DIV中的内容垂直居中,无非有以下几种方法。

HTML 元素标签在浏览器中默认样式介绍和重置方法

首推 Flex 弹性布局

CSS 属性 flex 规定了弹性元素如何伸长或缩短以适应 flex 容器中的可用空间。假设有下面的 HTML 代码:

<div id="content">居中显示</div>

那么我们可以编写CSS代码:

#content{
  display: flex;
  justify-content: center;
  align-items: center;
}

行高(line-height)法

如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如:

p{
    height:30px;
    line-height:30px;
    width:100px;
    overflow:hidden;
}

这段代码可以达到让文字在段落中垂直居中的效果。

内边距(padding)法

另一种方法和行高法很相似,它同样适合一行或几行文字垂直居中,原理就是利用 padding 将内容垂直居中比如:

p{
  padding:30px;
}

这段代码的效果和 line-height 法差不多。

模拟表格法

模拟表格法其实就是用CSS中对元素的声明让块元素像表格一样显示,用到的CSS属性有display、vertical-align等。 先看下面的Html代码:

<div id="box">
  <div id="content">居中显示</div>
</div>

参照以上 Html 代码,让最外面名为box的Div呈表格样式显示,然后再让box中名为content的Div呈单元格显示,并利用vertical-align:middle让其垂直居中,这样就模拟出来和表格一样的显示方式,CSS代码如下:

#wrap{
  height:400px;
  display:table;
}
#content{
  vertical-align:middle;
  display:table-cell;
  border:1px solid #FF0099;
  background:#000;
  width:400px;
}

但这种方法有一个弊端,由于IE浏览器对高度理解会产生错误,所以这种方法仅对Firefox有效,对IE无效,既然这样,我们就需要找出对IE的修正方法,于是有了另外一种方法。

定位法

顾名思义,定位法是利用CSS定位属性position对元素进行定位的方法,也属于模拟方法,不过它对IE的支持还是不错的。 它的Html代码为:

<div id="box">
  <div id="sub">
    <div id="content">垂直居中</div>
  </div>
</div>

这段代码比上一种方法中多出了一个名为sub的Div,它的作用是用来定位,原理就是:首先让box出于相对定位,sub相对box出于相对定位,位于 box垂直方向的50%,再让content中的真正内容出于sub垂直方向的-50%,从而制作出content在box中垂直居中的效果,它们的 CSS 代码如下:

#wrap{
  border:1px solid #000;
  background:#F00;
  width:400px;
  height:400px;
  position:relative;
}
#subwrap{
  position:absolute;
  top:50%;
}
#content{
  border:1px solid #000;
  position:relative;
  top:-50%;
  color:#FFF;
}

这段代码无论是在IE中还是Firefox中,都能正常居中了

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。