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

本文目录

• 如何让DIV水平和垂直居中
• 怎样让div的内容垂直居中显示
• 如何将一个div水平垂直居中
• DIV垂直居中
• 如何设置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;然后插入文字，就垂直居中了。

怎样让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水平垂直居中

方案一：div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，兼容性：,IE7及之前版本不支持div{width: 200px;height: 200px;background: green;position:absolute;left:0;top: 0;bottom: 0;right: 0;margin: auto;}方案二：div绝对定位水平垂直居中【margin 负间距】 这或许是当前最流行的使用方法。div{width:200px;height: 200px;background:green;position: absolute;left:50%;top:50%;margin-left:-100px;margin-top:-100px;} 方案三：div绝对定位水平垂直居中【Transforms 变形】兼容性：IE8不支持；div{width: 200px;height: 200px;background: green;position:absolute;left:50%; /* 定位父级的50% */top:50%;transform: translate(-50%,-50%); /*自己的50% */} 方案四：css不定宽高水平垂直居中.box{height:600px;display:flex;justify-content:center;align-items:center;/* aa只要三句话就可以实现不定宽高水平垂直居中。 */}.box》div{background: green;width: 200px;height: 200px;}

DIV垂直居中

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

如何设置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 一定要为什么？请比较以下两个例子：[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]上一个高度是用的绝对单位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: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[id] {display: table; position: static;}#middle {position: absolute; top: 50%;} /* for explorer only*/#middle[id] {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[id]。CSS2选择器#value[id]相当于选择器#value，但是Internet Explorer不支持这种类型的选择器。同样地.value[class]，相当于.value,这些只有标准浏览器能读懂。测试：Firefox1.5、Opera9.0、IE6.0、IE5.0通过。上面的代码不支持IE7，还需要在最下面加二句：*+html #outer[id]{position: relative;}*+html #middle[id]{position: absolute; }

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

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

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

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

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

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

怎么设置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。

浏览器