div 垂直居中（如何让DIV水平和垂直居中）

本文目录

• 如何让DIV水平和垂直居中
• 怎么让span在div中垂直居中
• 怎样让div的内容垂直居中显示
• div怎么垂直并居中排列，求大神
• 如何让div中的内容垂直居中
• 如何让“DIV”水平和垂直居中
• div+css 怎么让一个小div在另一个大div里面 垂直居中
• 如何设置div中的内容垂直居中
• DIV垂直居中

如何让DIV水平和垂直居中

主要的样式定义如下：body {TEXT-ALIGN: center;}#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }说明：首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。 如何使图片在DIV 中垂直居中用背景的方法。举例：body{BACKGROUND: url(/uploadfiles/2006/05181435734.gif) #FFF no-repeat center;}关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者“bottom right“等，也可以直接写数值“50 30“。如果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下：《html》《head》《style》body{TEXT-ALIGN: center;}#center{ MARGIN-RIGHT: auto;MARGIN-LEFT: auto; height:200px;background:#F00;width:400px;vertical-align:middle;line-height:200px;}《/style》《/head》《body》《div id=“center“》《p》test content《/p》《/div》《/body》《/html》说明：vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。

怎么让span在div中垂直居中

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

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

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

怎样让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中，都能正常居中了

div怎么垂直并居中排列，求大神

如果只是解决水平居中的话，那用margin:0 auto或者父级设置padding值都可以达到效果，但是要达到垂直居中，那就有点麻烦，你可以考虑用table布局达到效果，因为td默认是垂直居中的，下面就给你写个例子好了《body style=“margin:0; padding:0; height:100%;“》 《table border=“0“ cellpadding=“0“ cellspacing=“0“ width=“500“ style=“margin:0 auto; border:1px solid red;“》 《tr》 《td style=“height:600px;“》 《div style=“width:300px; height:100px; background:red;margin:0 auto;“》《/div》《div style=“width:300px; height:100px; background:black;margin:0 auto;“》《/div》《div style=“width:300px; height:100px; background:green;margin:0 auto;“》《/div》 《/td》 《/tr》 《/table》《/body》如果不想用table布局，那就用另外一个方法好了《body style=“margin:0; padding:0; height:100%;“》 《div style=“width:600px; height:600px; border:1px solid red; margin:0 auto; position:relative“》 《div style=“height:300px; width:400px; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-150px;“》 《div style=“height:100px; background:red;“》《/div》 《div style=“height:100px; background:black;“》《/div》 《div style=“height:100px; background:green;“》《/div》 《/div》 《/div》《/body》这个方法不好的地方就是必须固定高度，不太适合调整

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

以下是让div中的内容垂直居中的具体操作方法：

1、首先我们准备好一个空的html结构的文档。

2、接下来我们要准备的是准备一个div用来放内容了，这里为了显示特意给div设置了边框。

3、接下来我们就在div中添加内容，如下图所示，运行后你会发现内容偏向于左上角。

4、下面我们给div设置水平居中，如下图所示，并且设置行高为div的高度，你会发现它水平垂直居中了。

如何让“DIV”水平和垂直居中

说明，本文中所指的DIV包括HTML页面中所有的元素。让一个DIV水平居中，直接用CSS就可以做到。只要设置了DIV的宽度，然后使用margin设置边距0auto，CSS自动算出左右边距，使得DIV居中。.mydiv{margin:0auto;width:300px;height:200px;}但是如果要使DIV垂直方向也居中，恐怕CSS需要修改了。CSS实现水平和垂直居中要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。.mydiv{width:300px;height:200px;position:absolute;left:50%;top:50%;margin:-100px00-150px}该方法使用普遍，但是前提是必需设置DIV的宽度和高度。如果当页面DIV宽度和高度是动态的，比方说需要弹出一个DIV层并且要居中显示，DIV的内容是动态的，所以宽度和高度也是动态的，这时需要用jQuery可以解决居中。jQuery实现水平和垂直居中jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS，获取DIV的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该DIV得宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意DIV的CSS设置要在resize()方法中完成，就是每次改变窗口大小时，都要执行设置DIV的CSS，代码如下：$(window).resize(function(){$(“.mydiv“).css({position:“absolute“,left:($(window).width()-$(“.mydiv“).outerWidth())/2,top:($(window).height()-$(“.mydiv“).outerHeight())/2});});此外在页面载入时，就需要调用resize()。$(function(){$(window).resize();});此方法的好处就是不需要知道DIV的具体宽度和高度大小，直接用jQuery就可以实现水平和垂直居中，而且兼容各浏览器，这个方法在很多的弹出层效果中应用。

div+css 怎么让一个小div在另一个大div里面 垂直居中

方法一、小div绝对定位或相对定位，这样小div脱离标准流，大div有固定宽高，用小div的margin去挤大div

《!DOCTYPE html》

《html》《head》《meta charset=“UTF-8“》《title》Title《/title》《style》

.father{

width: 600px;

height: 600px;

background-color: orangered;

}

.son{

width: 300px;

height: 200px;

background-color: lawngreen;

position: absolute;

margin: 200px 150px;

}

《/style》《/head》《body》《div》《div》《/div》《/div》《/body》《/html》

注意：如果小div没有绝对定位或相对定位，且大div没有border，那么小div的margin实际上踹的是“流”，踹的是这“行”。如果用margin-top，大div整体也掉下来了。如下：

方法二、如果给大div加一个border，使大div，小div都不定位，用小div的margin去挤大div，实现小div居中。

《!DOCTYPE html》

《html》《head》《meta charset=“UTF-8“》《title》Title《/title》《style》

.father{

width: 600px;

height: 600px;

background-color: orangered;

border: 1px solid white;

}

.son{

width: 300px;

height: 200px;

background-color: lawngreen;

margin: 200px 150px;

}

《/style》《/head》《body》《div》《div》《/div》《/div》《/body》《/html》

显示结果如下：

方法三、小div绝对定位，大div相对定位，定位到大盒子的宽高一半的位置，再上下各margin负的自己宽高的一半

《!DOCTYPE html》

《html》《head》《meta charset=“UTF-8“》《title》Title《/title》《style》

.father{

width: 600px;

height: 600px;

background-color: orangered;

position: relative;

}

.son{

width: 300px;

height: 200px;

background-color: lawngreen;

position: absolute;

top: 50%;

left: 50%;

margin-top: -100px;

margin-left: -150px;

}

《/style》《/head》《body》《div》《div》《/div》《/div》《/body》

《/html》

显示结果如下：

扩展资料：

一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈这个元素，为参考点。工程上，“子绝父相”有意义，父亲元素没有脱标，儿子元素脱标在父亲元素的范围里面移动。

绝对定位之后，所有标准流的规则，都不适用了。所以margin:0 auto;失效。

display:inline和display:inline-block，会使margin:0 auto;失效。

固定宽度的盒子才能使用margin:0 auto;居中

如何设置div中的内容垂直居中

一、单行内容的居中只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了.middle-demo-1{height: 4em;line-height: 4em;overflow: hidden;}优点：1. 同时支持块级和内联极元素2. 支持所有浏览器缺点：1. 只能显示一行2. IE中不支持《img》等的居中要注意的是：1. 使用相对高度定义你的 height 和 line-height2. 不想毁了你的布局的话，overflow: hidden 一定要为什么？请比较以下两个例子：上一个高度是用的绝对单位px，并且没有隐藏溢出，下一个高度用的单位是相对单位em，并且隐藏了溢出。如果你的浏览器支持放大字体，那么尽情地放大字体，看看会出现什么效果。二、多行内容居中，且容器高度可变也很简单，给出一致的 padding-bottom 和 padding-top 就行.middle-demo-2{padding-top: 24px;padding-bottom: 24px;}优点：1. 同时支持块级和内联极元素2. 支持非文本内容3. 支持所有浏览器缺点：容器不能固定高度三、把容器当作表格单元CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign=“center“ 一样了。.middle-demo-3{display: table-cell;height: 300px;vertical-align: middle;}可惜IE不支持这些属性，不过在其他浏览器上显示效果非常完美。要注意的是：和一个合法的《td》元素必须在《table》里一样，display: table-cell 元素必须作为 display: table 的元素的子孙出现。优点：不用说了吧，就是表格，效果和表格一模一样缺点：IE下无效四、以毒攻毒！用 IE 的 bug 解决 IE 中的绝对居中先不得不说一句，IE 真的是个很烂的浏览器，CSS1中的定义都不支持，害得要我们转个大圈子来造居中。不过就像我说的，凡是 table 布局可以实现的，CSS 一定可以实现，即使在 IE 里也不例外。我研究 IE layout 模式多年，还是找出了一个可以在 IE 中绝对居中的方法。这个方法就是基于 IE layout 的 bug，也可以算以毒攻毒。至于原理，不要问我，这是独门秘学，何况三言两语也讲不清楚，只要好用就行.middle-demo-4{height: 300px;position: relative;}.middle-demo-4 div{position: absolute;top: 50%;left: 0;}.middle-demo-4 div div{position: relative;top: -50%;left: 0;}五、整合三和四，写出支持所有浏览器的垂直居中容器！思路是利用 IE 和 非IE 浏览器的 CSS hack, 整合三和四的CSS，写出兼容主流浏览器的垂直居中容器。具体代码就不给出了，大家权当作练习练习。例子可以在下面的附录中找到。最终实测支持的浏览器：IE6+, Mozilla 1.7, Netscape Navigator 8, Opera 8.0+, Firefox 1.0+ 和 Safari 1.0+IE5 下需要加上对合适模型的补正。推测支持的浏览器：Mozilla 1.5+, Netscape Navigator 7+, Opera 7+未测试浏览器：Konqueror

DIV垂直居中

下面是一段绝对垂直居中，在所有的浏览器种都是一样div《position:absolute;left:50%;margin:0px00-502px;width:1003px;height:600px;》希望可以帮助你龙信