热搜：编程 Python Microsoft 编程语言 C++

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

发布时间：2023-07-02 19:14:36 来源：互联网

.

美丽的小花园有许多榕树，一簇簇树叶伸到路面上，树叶真绿的可爱。榕树正在茂盛的时期，好象把它全部生命力都展示给我们看。那么多的树叶，一簇堆在另一簇上面，不留一点缝隙，我仿佛也成了一片树叶。那翠绿的颜色明亮地照耀着我的眼睛，似乎每片叶子上都颤动着一个新的生命。这美丽的北国树啊。

在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中几种内容垂直居中的方法