当前位置： >
不定宽高的文字在div中垂直居中
来源：CNBLOGS & 发布时间：
& 作者：网友 &
浏览次数：
摘要: 本人在面试的时候被问到：如何使一段不定宽高的文字垂直居中呢？ 现在来总结一下： 在body中写入结构 &div id="main"&
本人在面试的时候被问到：如何使一段不定宽高的文字垂直居中呢？
现在来总结一下：
在body中写入结构
&div id="main"&& & &div id="login"&& & & & djshdk awjdsd sede sfcdf vdj sh dkaw jds dse desf cdf vd jsh dkawjd sds ede sfcdfv vd jsh dkawjd sds ede sfcdfv.& & &/div& &/div&
#main{ position: & &//在父元素中使用相对定位 width: 200 height: 200 overflow: background-color: #ff0; padding: 10 } #login{ position: & /*在子元素中使用绝对定位*/ top:50%; & & & & & & & &/*距离相对于父元素的50%的高*/
background-color: # -webkit-transform:translate(-50%,-50%); & &/*CSS3的样式，:translate(-50%,-50%)相对于自己距离x轴和y轴的-50%*/ }
#main{ width: 200 height: 200 background-color: # display: & &/*让标签元素以表格的形式呈现*/}#login{ display: table- & &/*ie7和ie6都不能识别 display: table-*/ vertical-align:}
今天是第一次写随笔，从基础开始。加油！
我来说两句
友情链接：css中div百分比垂直居中几种方法-高级应用-Css教程-壹聚教程网css中div百分比垂直居中几种方法
css中div垂直居中一直是一个比较头痛的问题，下文我整理了几种div百分比垂直居中的解决方案， 如果有需要的朋友不防参考一下。
我们都知道，固定高宽的div在网页中垂直居中很简单，相信大家也很容易的写出来，但是不是固定高宽的div如何垂直居中呢？我们在网页布局，特别是手机等web端网页经常是不固定高宽的div，那么这些div如何垂直居中呢？这篇文章，我总结一下。
固定高宽div垂直居中
如上图，固定高宽的很简单，写法如下：
&position:
&left: 50%;
&top: 50%;
height:100
margin-left:-100
margin-top:-50
不固定高宽div垂直居中的方法
用一个&&伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。
html如下：
&div class=&block& style=&height: 300&&
&&& &div class=&centered&&
&&&&&&& &h1&haorooms案例题目&/h1&
&&&&&&& &p&haorooms案例内容，haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容&/p&
&&& &/div&
/* This parent can be any width and height */
& text-align:
/* The ghost, nudged to maintain perfect centering */
.block:before {
& content: '';
& display: inline-
& height: 100%;
& vertical-align:
& margin-right: -0.25 /* Adjusts for spacing */
/* The element to be centered, can
&& also be of any width and height */
.centered {
& display: inline-
& vertical-align:
& width: 50%;
可以用table布局方法，但是这种方法也有局限性！
写法如下：
&table style=&width: 100%;&&
&&&& &td style=&text-align: vertical-align:&&
&&&&&&&&& Unknown stuff to be centered.
&&&& &/td&
由于table写法比较费时，你也可以用div代替table,写法如下：
&div class=&something-semantic&&
&& &div class=&something-else-semantic&&
&&&&&& Unknown stuff to be centered.
.something-semantic {
&& display:
&& width: 100%;
.something-else-semantic {
&& display: table-
&& text-align:
&& vertical-align:
方法三，终极解决方法：
以上2中方法可能都有其局限性，我介绍的第三中方法是比较成熟的不是固定高宽div的垂直居中的方法！但是方法是css3的写法，想兼容IE8的童鞋们，建议用上面的方法！
方法和我们固定高宽的差不多，但是不用margin我们用的是 translate()
demo如下：
&!DOCTYPE html PUBLIC &-//W3C//DTD XHTML 1.0 Strict//EN& &http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&&
&html xmlns=&http://www.w3.org/1999/xhtml& xml:lang=&en&&
&&& &meta http-equiv=&Content-Type& content=&text/charset=UTF-8&&
&&& &title&haorooms不固定高度div写法&/title&
&&& &style&
& position:
& top: 50%;
& left: 50%;
& background-color: #000;
& width:50%;
& height: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
&&& &/style&
&&& &div class=&center&&&/div&
我上面的css只是针对webkit内核的，其他内核浏览器写法如下：
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
有些的样式，也可以用这个方法居中
left: 50%;
width: 50%;
max-width: 630
min-width: 320
z-index: 2000;
visibility:
-webkit-backface-visibility:
-moz-backface-visibility:
backface-visibility:
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
方法四,多行未知高度文字的垂直居中
如果一段内容，它的高度是可变的那么我们就可以使用上一节讲到的实现水平居中时使用到的最后一种方法，就是设定Padding，使上下的
padding值相同即可。同样的，这也是一种&看起来&的垂直居中方式，它只不过是使文字把&div&完全填充的一种访求而已。可以使用类似下
面的代码：
padding:25
这种方法的优点就是它可以在任何浏览器上运行，并且代码很简单，只不过这种方法应用的前提就是容器的高度必须是可伸缩的。
&!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/1999/xhtml&&
&title& 多行文字实现垂直居中 &/title&
&meta http-equiv=&Content-Type& content=&text/ charset=utf-8& /&
&style type=&text/css&&
body { font-size:12font-family:}
padding:25
border:1px solid #FF0099;
background-color:#FFCCFF;
&div&&pre&现在我们要使这段文字垂直居中显示！
padding:25
border:1px solid #FF0099;
background-color:#FFCCFF;
&/pre&&/div&
好了到了这里关于div居中的例子也就介绍完了，各位可自行选择最合适自己的哦。
上一页： &&&&&下一页：相关内容后使用快捷导航没有帐号？
只需一步，快速开始
查看: 26294|回复: 8
如何让div里面的内容垂直居中?
UID388051在线时间 小时积分1278帖子离线17275 天注册时间
银牌会员, 积分 1278, 距离下一级还需 1722 积分
如何让div里面的内容居中,我知道用line-height可以设置内容居中,但是那只是针对DIV里面只有一行的内容,
如果我的DIV里面的内容有多行,或者出现了滚动条的话,则我想让它的内容居中,应该如何让它显示呢?
&div style=&width:100height:100background:overflow: vertical-align:middle&&
& && && && &aaaaaaaaaaaa,b
& && && && &bbbbbbbbbbb,cc
& && && && &cccccccccc,dddd
& && && && &aaaaaaaaaaaa,b
& & &/div&
如果div里面的内容显示为一行的话,则我设置line-height为100px的话,内容是一定会居中的,但是如果我的DIV
里面的内容为几行的话,我设置line-height为100px的话,则它是针对DIV里面的每一行的内容,这样还是实现不
了div里面的内容居中的效果,
请问各位有什么高招,能够实现让DIV里面无论有多少内容,不管有多少行,它都是垂直居中显示,
UID388051在线时间 小时积分1278帖子离线17275 天注册时间
银牌会员, 积分 1278, 距离下一级还需 1722 积分
终于把这个问题解决了,谢谢楼上的帮忙,但是楼上的都是不正确的结果,我也是从网站上找到的,贴个网址这里,大家去看吧,希望以后有用得上的朋友
UID37322在线时间 小时积分682帖子离线17275 天注册时间
高级会员, 积分 682, 距离下一级还需 318 积分
贴的字太多……
不知道是不是满足楼主的要求呢
贴网址是不是会给版主喀嚓了
UID388051在线时间 小时积分1278帖子离线17275 天注册时间
银牌会员, 积分 1278, 距离下一级还需 1722 积分
怎么没有人知道啊...
UID469647在线时间 小时积分47帖子离线17275 天注册时间
新手上路, 积分 47, 距离下一级还需 3 积分
&div style=&width:300min-height:50background: vertical-align: padding:50px 18overflow:&&
目前互联网上关于Lucene 及 Lucene.net 的文章很多，看了一些，感觉绝大部分还是偏向于应用，真正深入探讨其核心算法的文章不是太多，目前互联网上关于Lucene 及 Lucene.net 的文章很多，看了一些，感觉绝大部分还是偏向于应用，真正深入探讨其核心算法的文章不是太多。
&提示：您可以先修改部分代码再运行
[[i] 本帖最后由 dandan304 于
15:04 编辑 ]
UID480842在线时间 小时积分45帖子离线17275 天注册时间
提示: 作者被禁止或删除。
UID485000在线时间 小时积分7423帖子离线17275 天注册时间
好像不是的，那我自己先研究一下好了！
UID485000在线时间 小时积分7423帖子离线17275 天注册时间
不知道 这是不是你要的效果
&meta http-equiv=&Content-Type& content=&text/ charset=gb2312&&
&title&无标题文档&/title&
&div style=&margin:0width:100height:100line-height:24background:overflow: vertical-align:middle&& aaaaaaaaaaaa,b
bbbbbbbbbbb,cc
cccccccccc,dddd
aaaaaaaaaaaa,b &/div&
&提示：您可以先修改部分代码再运行
[[i] 本帖最后由 juice9958 于
14:12 编辑 ]
UID329471在线时间 小时积分2580帖子离线17275 天注册时间
银牌会员, 积分 2580, 距离下一级还需 420 积分
论坛里已有讨论过这个问题了，而且还说的很清楚，你可以搜索下贴子呀。
Powered by如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：
p { height:30px; line-height:30px; width:<span style="color: #px; overflow:hidden; }
这段代码可以达到让文字在段落中垂直居中的效果。
另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：
p { padding:20px 0; }
这段代码的效果和line-height法差不多。
将容器设置为display:table，然后将子元素也就是要垂直居中显示的元素设置为display:table-cell，然后加上vertical-align:middle来实现。
html结构如下：
&div id="wrapper"&
&div id="cell"&
&p&测试垂直居中效果测试垂直居中效果&/p&
&p&测试垂直居中效果测试垂直居中效果&/p&
#wrapper {display:table;width:<span style="color: #px;height:<span style="color: #px;background:#000;margin:0 auto;color:red;}
#cell{display:table-cell; vertical-align:middle;}
实现如图所示：
遗憾的是IE7及以下不支持。
css代码如下：
.center-vertical{
position: relative;
transform:translateY(-50%);
}.center-horizontal{
position: relative;
transform:translateX(-50%);
五：css3的box方法实现水平垂直居中
html代码：
&div class="center"&
&div class="text"&
&p&我是多行文字&/p&
&p&我是多行文字&/p&
&p&我是多行文字&/p&
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #ccc;
background:#000;
color:#fff;
margin: 20px auto;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
display: -o-box;
-o-box-orient: horizontal;
-o-box-pack: center;
-o-box-align: center;
display: -ms-box;
-ms-box-orient: horizontal;
-ms-box-pack: center;
-ms-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
&结果如图：
阅读(...) 评论()
Copyright (C)2017 风雨后见彩虹