写了两个例子,一个是利用这个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>
div区域块的居中问题:用margin:0 auto讲解:margin这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。
margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
margin:0 auto中0代表上下间距为0px,当然你可以适应页面来自己调整上下间距;auto代表左右居中;
希望我的回答对你有所帮助,如果还有其他疑问请继续追问我!