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

顺晟科技

2021-08-26 13:06:18

338

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

上一篇：网站使用JS禁止复制粘贴保存为方法下一篇：Vue3.2 使用 script s

网站建设

Js

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