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

html-css024

怎么设置div中的内容垂直居中,第1张

有以下三种方法:

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。

CSS实现div垂直居中的方法有很多,下面div居中的几种方法是自己平时写网页中经常用到的,最常见的例子就是登录注册弹出框。

方法一:对div使用绝对布局position:absolute并设置top,left,right,bottom的值相等,但不一定都等于0;并且设置margin:auto。

方法二:这个方法要知道div的宽度和高度。对div使用绝对布局position:absolute并把top和left的值都设置为50%;50%就是指页面窗口的宽度和高度的50%;最后将div左移和上移,左移和上移的大小为div宽度和高度的一半。

其中 margin-left:-100px 和 margin-top:-100px 可以写成 margin:-100px  0px  0px  -100px

方法三:div使用绝对定位position:absolute,并且设置left和top的值都为50%。使用css3的transform属性。transform:translate(-50%,-50%)。

以上3种方法的效果如下显示

若有两个div,里面小的div相对于外面大的div水平垂直居中对齐,有以下几种方法。

方法一:利用position和margin:auto实现。父元素设置position:relative;子元素设置position:absolute,并设置top,left,right,bottom值相等。

方法二:使用position。父元素设置position:relative;子元素设置position:absolute。并设置top和left为50%,并设置左移和上移为子元素的大小的一半。

方法三:使用display:flex。这种方法需要设置浏览器的兼容性。

方法四:使用transform:translate()。父元素设置position:relative;子元素设置position:absolute。并设置top和left为50%。最后设置transform:translate(-50%,-50%)。

以上四种方法的效果图如下显示

今天就跟大家分享这么多~如果你有更好的方法,请在下方留言

方法一:

用一个“ghost”伪元素(看不见的伪元素)和 inline-block / vertical-align 可以搞定居中,非常巧妙。但是这个方法要求待居中的元素是 inline-block,不是一个真正通用的方案。

html如下:

<div class="block" style="height: 300px">

<div class="centered">

<h1>haorooms案例题目</h1>

<p>haorooms案例内容,haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容</p>

</div>

</div>

css如下:

/* This parent can be any width and height */

.block {

text-align: center

}

/* The ghost, nudged to maintain perfect centering */

.block:before {

content: ''

display: inline-block

height: 100%

vertical-align: middle

margin-right: -0.25em/* Adjusts for spacing */

}

/* The element to be centered, can

also be of any width and height */

.centered {

display: inline-block

vertical-align: middle

width: 50%

}

方法二:

可以用table布局方法,但是这种方法也有局限性!

写法如下:

<table style="width: 100%">

<tr>

<td style="text-align: centervertical-align: middle">

Unknown stuff to be centered.

</td>

</tr>

</table>

由于table写法比较费时,你也可以用div代替table,写法如下:

html:

<div class="something-semantic">

<div class="something-else-semantic">

Unknown stuff to be centered.

</div>

</div>

css:

.something-semantic {

display: table

width: 100%

}

.something-else-semantic {

display: table-cell

text-align: center

vertical-align: middle

}

方法三,终极解决方法:

以上2中方法可能都有其局限性,我介绍的第三中方法是比较成熟的不是固定高宽div的垂直居中的方法!但是方法是css3的写法,想兼容IE8的童鞋们,建议用上面的方法!

方法和我们固定高宽的差不多,但是不用margin我们用的是 translate()

demo如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">

<title>haorooms不固定高度div写法</title>

<style>

.center {

position: fixed

top: 50%

left: 50%

background-color: #000

width:50%

height: 50%

-webkit-transform: translateX(-50%) translateY(-50%)

}

</style>

</head>

<body>

<div class="center"></div>

</body>

</html>

我上面的css只是针对webkit内核的浏览器,其他内核浏览器写法如下:

-webkit-transform: translateX(-50%) translateY(-50%)

-moz-transform: translateX(-50%) translateY(-50%)

-ms-transform: translateX(-50%) translateY(-50%)

transform: translateX(-50%) translateY(-50%)