正文

Div垂直居中效果怎么实现

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0623

本篇文章主要给大家介绍实现div垂直方向居中的方法。

网页设计中div各种居中布局，是html/css初学者们最为基础且需要掌握的知识技能。div水平居中效果我们在之前的文章中有为大家介绍过，想必新手朋友们也都已经掌握了解了。

下面我们就继续结合简单的示例给大家介绍div内容垂直居中的实现方法。

推荐参考学习：《html教程》

div垂直居中代码示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Div垂直居中</title>
</head>
<body>
<div style="line-height: 500px;height: 500px;width: 500px;  background: red;">
    米米素材网
</div>
</body>
</html>

前台效果如下图所示：

43236c8ed32a2ce6726f860720c3a4e.png

如图所示，div中的文字垂直居中。其中主要的属性就是line-height。
line-height 属性设置行间的距离（行高即垂直方向）。

line-height属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。

如果我们这里将设置的高度height:500px，改为200px，那么呈现效果如下：

f9b5d149af3b9a3c2fa6a8e6399f214.png

如果我们这里不设置高度height但是设置line-height: 200px;，效果就如下所示：

be5b1028c3db681b89467f71979ed30.png

此时我们可以测量发现红色背景的div的高度为400px。

line-height和height区别：

简单得说，line-height是行高的意思，height则是定义元素自身的高度。

综上所述，当我们想要实现div内容垂直居中效果，需要使line-height和height值保持一致。

本篇文章就是关于div垂直居中的实现方法介绍，也是非常简单易懂的，希望对需要的朋友有所帮助！