水平居中很简单,垂直居中头裂开。垂直居中小技巧,只会一种怎能行,要是这种没法用,你说你该怎么做。不如看看此博客,从此居中不难弄。
css的四种简单的垂直居中
一.将line-height的值设置为高度大小
line-height,设置多行元素的空间量,如多行文本的间距。这里可以用来实现文字的垂直居中
这里有个设置长宽背景的div盒子,里面有个p标签,p标签里面有一行文字,除此没有做任何处理。如下图:
这时候我们给p标签添加line-height属性,将行高设置成盒子一样的宽度。
<style>
div {
width: 250px;
height: 200px;
background-color: blanchedalmond;
}
p {
line-height: 200px;
}
</style>
</head>
<body>
<div>
<p>line-height的测试垂直居中p</p>
</div>
</body>
此时文本便居中对齐,如下图所示: