css实现垂直与水平居中

最新推荐文章于 2023-09-30 13:11:25 发布

辉娜

最新推荐文章于 2023-09-30 13:11:25 发布

阅读量71

点赞数

分类专栏： css 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_44211097/article/details/120638524

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: cornflowerblue;
            text-align: center;
        }
        
        .box p {
            color: whitesmoke;
            font-size: 30px;
            line-height: 300px;
        }
        
        .box1 {
            background-color: rgb(136, 164, 189);
            width: 100px;
            height: 100px;
        }
        /* 多行文本居中 */
        
        .box2 {
            position: relative;
            /*设置元素相对定位*/
            width: 300px;
            height: 300px;
            /* margin: 20px auto; */
            background: rgb(155, 155, 218);
            text-align: center;
            display: table;
        }
        
        .box2 p {
            color: whitesmoke;
            font-size: 16px;
            display: table-cell;
            vertical-align: middle;
            line-height: 25px;
        }
        /* 多行文本 */
        
        .box3 {
            position: relative;
            width: 300px;
            height: 300px;
            /* margin: 0 auto; */
            text-align: center;
            background-color: cornflowerblue;
        }
        
        .box3 p {
            color: azure;
            font-size: 16px;
            line-height: 25px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        /* 多行文本flex */
        
        .box4 {
            width: 300px;
            height: 300px;
            background-color: darkcyan;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .box4 p {
            font-size: 16px;
            color: aliceblue;
            line-height: 25px;
        }
        /* padding填充 */
        
        .box5 {
            width: 200px;
            /* height: 200px; */
            background-color: coral;
            text-align: center;
        }
        
        .box5 p {
            padding: 80px 0;
            font-size: 16px;
        }
        
        .box6 {
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
            position: absolute;
            /* background-color: #4800ff; */
            text-align: center;
            left: 0;
            /*-- left和right配对出现控制水平方向 --*/
            right: 0;
            top: 0;
            /*-- top和bottom配对出现控制垂直方向居中 --*/
            bottom: 0;
            margin: auto;
        }
        
        .box6 p {
            font-size: 20px;
            color: rgb(73, 77, 80);
            position: absolute;
            /* background-color: #4800ff; */
            text-align: center;
            left: 0;
            /*-- left和right配对出现控制水平方向 --*/
            right: 0;
            top: 0;
            /*-- top和bottom配对出现控制垂直方向居中 --*/
            bottom: 0;
            margin: auto;
            /* 这句是必须的*/
        }
    </style>
</head>

<body>
    <!-- 单行文本居中 -->
    <div class="box">
        <p>你好，世界</p>
    </div>
    <div class="box1"></div>
    <!-- 多行文本居中 -->
    <!-- 1.display:table -->
    <div class="box2">
        <p>宽度和高度为300px,使div左右auto居中,背景颜色为黑色,字 体颜色为白色,行高为25px,字体颜色为白色
        </p>
    </div>
    <!-- 2.使用absolute与transform -->
    <div class="box3">
        <p>这里是通过absolute和transform定位</p>
    </div>
    <!-- 3.flex实现 -->
    <div class="box4">
        <p>flex实现居中</p>
    </div>
    <!-- 4.padding填充 -->
    <div class="box5">
        <p>padding填充</p>
    </div>
    <div>
        <div class="box6">
            <p>绝对居中</p>
        </div>
    </div>

</body>

</html>

1）单行文本的居中

主要实现css代码：

水平居中：text-align:center;垂直居中：line-height:XXpx; /*line-height与元素的height的值一致*/

2）多行文本的垂直居中

对于多行文本的垂直居中我们有很多种实现方式，我们这里逐个的来看一下；

1、使用display:table来实现

主要实现代码：

display: table使块状元素成为一个块级表格;

display: table-cell;子元素设置成表格单元格;

vertical-align: middle;使表格内容居中显示，即可实现垂直居中的效果;

2、使用absolute与transform配合实现

主要实现代码：

position:absolute; 首先给文本绝对定位；

left:50%;top:50%;transform:translate(-50%,-50%); 让文本距离盒子左边和上边分别为50%，再用transform向左（上）平移它自己宽度（高度）的50%，也就达到居中效果了。

3、使用flex实现

主要实现代码：

display: flex;设置 display 属性的值为 flex 将其定义为弹性容器

align-items: center;定义项目在交叉轴（纵轴）上如何对齐，垂直对齐居中

justify-content: center; 定义了项目在主轴上的对齐方式，水平对齐居中

4.div不设置高度，子元素padding填充