div垂直居中显示三种方式，水平垂直居中css
大家好，今天小编来为大家解答div垂直居中显示三种方式这个问题，水平垂直居中css很多人还不知道，现在让我们一起来看看吧！
怎样让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水平居中并垂直居中
主要的样式定义如下：
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+CSS如何让文字垂直居中
div+css实现文字垂直居中的五种方法：
1、把文字放到table中，用vertical-align property属性来实现居中。
<div id="wrapper">
<div id="cell">
<div class="content">Content goes here</div>
</div>
</div>
2、使用绝对定位的 div，把它的 top设置为 50％，top margin设置为负的 content高度。这意味着对象必须在 CSS中指定固定的高度。
#content{
position: absolute;
top: 50%;
height: 240px;
margin-top:-120px;/* negative half of the height*/
}
<div class="content"> Content goes here</div>
3、在 content元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。
content清除浮动，并显示在中间。
<div id="floater">
<div id="content">Content here</div>
</div>
#floater{
float: left;
height: 50%;
margin-bottom:-120px;
}
#content{
clear: both;
height: 240px;
position: relative;
}
4、使用 position:absolute，有固定宽度和高度的 div。这个 div被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto;会使它居中。使用 margin:auto;使块级元素垂直居中即可
<div id="content"> Content here</div>
#content{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 240px;
width: 70%;
}
5、将单行文本置中。只需要简单地把 line-height设置为那个对象的 height值就可以使文本居中了。
<div id="content"> Content here</div>
#content{
height: 100px;
line-height: 100px;
}
好了，文章到此结束，希望可以帮助到大家。