唯品秀博客
  • 温馨提示:唯品秀个人博客2016/11/16正式上线了!
  • 博客不定时更新、修复bug,若无法正常访问浏览,请稍后再试
  • 欢迎各位前端伙伴注册登录会员,共同分享前端技巧
  • 2018/04/24日最近更新:优化主导航高亮显示配置
首页 > 前端开发 > HTML/CSS > 未知高度和宽度元素的水平垂直居中 (不外传秘法)

未知高度和宽度元素的水平垂直居中 (不外传秘法)

2017年05月18日 作者: 管理员 7737次浏览 条评论

在说到这个问题的时候,我们都知道,table默认文字就是垂直居中显示的,也许有人会问Div中CSS中不是有text-align属性来设置垂直居中的吗?是的,通常我们使文字垂直居中用的就是这个属性,但是在正式开发时候单单掌握这个可不够,例如:现在有一需求,在div中(未知宽高),里面内容不固定,不管是文字占1行还是多行都在div中垂直居中,那么应该怎么做?

当要被居中的元素是inline(例如span)或者inline-block(例如div/p)的时候,可以巧妙的将父级容器设置为display:table-cell,配合text-align:center和vertical-align:middle即可以实现水平垂直居中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/199<img src=" http://www.weipxiu.com/wp-content/uploads/2017/05/G5UC9DYR54DWIX7RLE.png " alt=" " width="1052 " height="198 " class="alignnone size-full wp-image-679 " />
<head>
<title> 多行文字实现垂直居中 </title>
<meta http-equiv="Content-Type " content="text/html; charset=utf-8 " />
<style type="text/css">
body {
    font-size:12px;
    font-family:tahoma;
}
div#wrap {
   height:400px;
    display:table;
}
div#content {
   vertical-align:middle;
    display:table-cell;
    border:1px solid #FF0099;
   background-color:#FFCCFF;
   width:760px;
}
div#content p {
   text-align:center;
}
 </style>
 </head>
 <body>
     <div id="wrap ">
        <div id="content ">
          <p>现在我们要使这段文字垂直居中显示</p>
          <p>现在我们要使这段文字垂直居中显示</p>
          <p>现在我们要使这段文字垂直居中显示</p>
        </div>
     </div>
 </body>
</html>

工作需求示例展示:

「一年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞( 6 ) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
6

谢谢你请我吃鸡腿*^_^*

支付宝
微信

上一篇:

下一篇:

前端简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站, 愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,了解更多...

风云英雄

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,却获得了斯坦福、哈佛等许多常青藤名校课程的结业证……他们的同学不局限在一国一校,而是遍及全球……加入他们,成为一名互联网学习者!

站点统计

  • 文章: 128 篇
  • 分类: 13 个
  • 标签: 218 个
  • 运行: 554天
  • 访问:6,587,558次
  • 更新: 2018年6月22日
服务热线:
 182XXXX8470

 QQ在线交流

点击这里给我发消息
点击这里给我发消息

 旺旺客服