在css+div的布局中,有时候需要内容在div中的位置进行垂直居中。下面提供了几种方法可供参考!

css内容垂直居中的方法

1、设置CSS行高属性使用内容垂直居中

设置 css line-height 属性的值与DIV元素的height的值相同,可以使DIV内的内容垂直居中!

HTML代码:

<!DOCTYPE html>
<html>
<head>
    <style>
        div{
            height: 40px;
            line-height: 40px;
            width:400px;
            border:1px solid #ddd;
        }
    </style>
</head>
<body>
<div>
    飞鸟慕鱼博客
</div>
</body>
</html>

代码演示结果:

css内容垂直居中的方法

2、使用内边距来设置内容垂直居中

使用 css 中的 padding 属性,来设置内容在DIV元素中垂直居中

HTML代码:

<!DOCTYPE html>
<html>
<head>
    <style>
        div{
            padding: 20px;
            width:400px;
            border:1px solid #ddd;
        }
    </style>
</head>
<body>
<div>
    飞鸟慕鱼博客
</div>
</body>
</html>

代码演示结果:

css内容垂直居中的方法

3、使用 flex 布局来设置内容的垂直居中

html代码:

<!DOCTYPE html>
<html>
<head>
    <style>
        div{
            display: flex;
            /*实现垂直居中*/
            align-items: center;
            width:200px;
            height:200px;
            margin:0 auto;
            background-color:green;
        }
    </style>
</head>
<body>
<div>
    飞鸟慕鱼博客
</div>
</body>
</html>

代码演示结果:

css内容垂直居中的方法

4、使用模仿表格布局的方法

html代码:

<!DOCTYPE html>
<html>
<head>
    <style>
    #wrapper {display:table;width:200px;height:200px;background:#000;margin:0 auto;color:red;}
    #cell{display:table-cell; vertical-align:middle;}
    </style>
</head>
<body>
<div id="wrapper">
    <div id="cell">
        <p>飞鸟慕鱼博客,这是垂直居中的!</p>
    </div>
</div>
</body>
</html>

代码演示结果:

css中几种内容垂直居中的方法