div 垂直居中（怎样让div的内容垂直居中显示）

本文目录

• 怎样让div的内容垂直居中显示
• css使div里的内容垂直居中
• 怎么设置div中的内容垂直居中
• 怎么让span在div中垂直居中
• div 中的文字是多行的，怎样让他们垂直居中
• 如何让div中的div垂直居中
• 如何让div垂直居中

怎样让div的内容垂直居中显示

虽然Div布局已经基本上取代了表格布局，但表格布局和Div布局仍然各有千秋，互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项，不过好在千变万化的CSS可以灵活运用，可以制作出准垂直居中效果，勉强过关。 要让div中的内容垂直居中，无非有以下几种方法，等我一一列举： 一、行高（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中，都能正常居中了

css使div里的内容垂直居中

要div垂直居中,最好的方法就是让height和ling-height的数值一致.比如《divstyle="height:30px;line-height:30px"》xxx《/div》这样,里面的内容xxx就会垂直居中显示!然后再使其水平居中,使用text-align例子:《divstyle="height:30px;line-height:30px;text-align:center"》xxx《/div》这样,垂直+水平就居中了.line-height是css中能够方便设置字的垂直位置的好方法~!

怎么设置div中的内容垂直居中

有以下三种方法：

1、设置div的height和line-height值设置为相同的数值，只需要一个div即可。

2、设置父级div样式的display:table，并设置子div样式的display:table-cell、vertical-align:middle，此时需要一个父级div和一个子级div。

3、设置父级div样式为display:box、box-pack:center、box-orient:vertical，记得要在前面加上浏览器前缀，例如chrome浏览器为-webkit-box-pack:center、-webkit-box-orient:vertical，需要一个父级div和一个子级div。

怎么让span在div中垂直居中

1、首先打开hbuilder软件，新建一盒html文件，写入一个外围的div容器标签，div中设置一个span标签：

2、然后在上方设置style标签，在里面设置div的字体，高度和宽度以及背景颜色的属性，同时设置div的display属性为table-cell，将它设置为表格元素，然后设置纵向对齐方式vertical-align属性为中间居中，在span标签中不设置高度和宽度就可以垂直居中了：

3、最后打开浏览器就可看到垂直居中的效果了：

div 中的文字是多行的，怎样让他们垂直居中

单纯的用css控制的话，有一下几个方法可以解决：1、用padding给div设置内边距，让文字看上去是垂直居中的2、实用table布局，td默认情况下是垂直居中，所以在div内插入table，再在td上设置text-align:center;就能控制文字垂直居中和水平居中3、通过给文字设置line-height来达到垂直居中的效果，比如你想div高度是height:50px;但是却又没设定这个属性，那你就可以用line-height:50px;同样达到效果

如何让div中的div垂直居中

通过设置外层div的padding上下边距，来达到垂直居中。

《head》《meta charset="utf-8"/》《/head》《style》body,div{margin:0;padding:0;border:0;font-size:0}#div{width:40%;overflow:auto;border:1px solid red;font-size:14px;padding:50px 0;text-align:center}#innerdiv{float:left;width:300px;height:300px;border:1px solid blue;margin:0 auto;box-sizing:border-box;font-size:14px}《/style》《body》《div id="div"》我是外面的div    《div id="innerdiv"》我是里面的div    《/div》《/div》《/body》

如何让div垂直居中

div 的垂直居中 可以用position:relative left=50% top=50% 在这个层里面再建一个divposition:relative left=-50% top=-50% div 的水平居中 可以在body 设置 text-align=center 又或者设置line-height=*px 尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。CSS body {padding: 0; margin: 0;}body,html{height: 100%;}#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;}#outer {display: table; position: static;}#middle {position: absolute; top: 50%;} /* for explorer only*/#middle {display: table-cell; vertical-align: middle; position: static;}#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */div.greenBorder {border: 1px solid green; background-color: ivory;}xhtml《div id="outer"》 《div id="middle"》 《div id="inner" class="greenBorder"》 《/div》 《/div》《/div》以上CSS代码的优点是没有hacks，采用了IE不支持的CSS2选择器#value。CSS2选择器#value，相当于.value,这些只有标准浏览器能读懂。测试：Firefox1.5、Opera9.0、IE6.0、IE5.0通过。上面的代码不支持IE7，还需要在最下面加二句：*+html #outer{position: relative;}*+html #middle{position: absolute; }