html中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。
怎样让html中的文字垂直水平居中显示
1、在html编辑器中，新建一个html文件，例如：index.html。
2、在index.html中的body标签中，填入html代码：
div style="position: absolute;top: 50%;left: 50%;height: 10%;width: 30%;margin: -5% 0 0 -15%;"123asfafada/div
3、最后，浏览器运行index.html，此时html中的文字被成功垂直水平居中显示。
html 如何让div居中
div居中可以用外边距margin属性来实现。
1、新建html文档，在body标签中添加div标签，标签的id为“header”，这时因为div标签中没有内容且没有设置样式，所以网页中显示空白：
2、这时为div标签设置原题中的css样式，此时虽然div盒子显示了，但是没有居中：
3、此时为div添加一个“margin: 0 auto”属性就会居中显示，“margin”指的是div标签的外边距，“0”指的是div标签上下的外边距，“auto”指的是div标签左右的外边距，并且会根据浏览器窗口大小自动居中，这时就是完整的html和css代码：
html中怎么让一个div垂直居中
line-height通常是用于调节一段文字的行与行之间的距离，或者说两行文字之间的距离，如果行高 是500px，那么每一行中的文字距离本行的顶部就是250px，如果将文字的行高设为500px，并且外面的容器的高度也为500px，同样可以实现垂 直居中，但是用它来实现垂直居中，也是有缺点的，就是如果内容过多，文字就会跑到下一行，那么内容就不可能垂直居中了。
HTML代码：
/strong
h1Hi, I'mspanVertically Aligned/span Within the H1/h1
CSS代码：
/strong
body {
margin: 0;
padding: 0;
background: #1d1d1d;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
font: 3em Georgia, "Times New Roman", Times, serif;
color: #fff;
height: 500px;
line-height: 500px;
text-align:center;
border: 10px solid #999;
}
h1 span {
font-weight: bold;
font-size:1.5em;
color: #fff000;
}
p {
font-size: 1.3em;
color: #999;
}
strong {
color: #fff;
}
方法二：利用绝对定位/strong
这个方法有个缺点我必须指出，就是外面的块状元素，必须指定高度，所以如果你在里面放动态的内容的话，后果会很糟糕滴~
HTML代码：/strong
div class="vert"
h1Hi, I'mspanVertically Aligned/span/h1
pAbigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua. Acsi et fere similis strongUsing/strong augue strongabsolute/strong validus. Regula strongpositioning/strong eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. /p
/div
CSS代码/strong
这种用绝对定位来实现的垂直居中，取决与元素的宽度和高度，你可以用下面这两个公式来计算元素的左边距和上边距
元素的宽度/2 = 负左边距
元素的高度/2 = 负上边距
在这个例子中，我们就是这么计算的
.vert {
width: 580px;
height: 190px;
position: absolute;
top: 50%;
left: 50%;
margin: -95px 0 0 -290px;
}
完整CSS代码/strong
body {
margin: 0;
padding: 0;
background: #1d1d1d;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h1 {
font: 4em Georgia, "Times New Roman", Times, serif;
color: #fff;
border-bottom: 5px dotted #999;
margin: 0;
padding: 0 0 10px;
}
h1 span {
font-weight: bold;
display:block;
font-size:1.5em;
color: #fff000;
}
p {
font-size: 1.3em;
color: #999;
}
strong {
color: #fff;
}
.vert {
width: 580px;
height: 190px;
position: absolute;
top: 50%;
left: 50%;
margin: -95px 0 0 -290px;
}
问题延伸
/strong如果元素的外面还有一个父级元素，如果才能让元素垂直居中于父级元素内部？比如下面的代码，多了一个父级元素
div class="container"
div class="vert"
h1Hi, I'm Nested amp;spanVertically Aligned/span/h1
pAbigo sudo mara paulatim odio, accumsan luptatum nibh nibh refero metuo opes ut fatua. Acsi et fere similis strongUsing/strong augue strongabsolute/strong validus. Regula strongpositioning/strong eu jus vel, indoles fere iaceo ea similis. Velit praemitto nulla vel luctus secundum. /p
/div
/div
这时候，就必须在定义父级元素的CSS代码中加入position: relative;才能够使内部元素垂直居中于父级内部，代码如下：
.container {
position: relative;
height: 500px;
width: 800px;
border: 10px solid #999;
background: #000;
margin: 20px;
}