html5 怎样让div垂直居中

html-css052

html5 怎样让div垂直居中,第1张

div区域块的居中问题:用margin:0 auto

讲解:margin这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

margin:0 auto中0代表上下间距为0px,当然你可以适应页面来自己调整上下间距;auto代表左右居中;

希望我的回答对你有所帮助,如果还有其他疑问请继续追问我!

写了两个例子,一个是利用这个line-height属性,一个是利用padding来设置,都达到了垂直居中的效果

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>垂直居中</title>

</head>

<style>

*{padding:0margin: 0}

    p span{float:left}

    p{height:100pxline-height:100pxfont-size:25pxborder:1px solid redtext-align:center}

    div span{float:leftheight:100pxpadding:30px 0pxfont-size:25px}

    div{height:100pxborder:1px solid red}

</style>

<body>

    <p><span>第一个文本<span></p>

        <div><span>第二个文本<span></div>

</body>

</html>