CSS之水平垂直居中

最新推荐文章于 2024-09-07 17:40:45 发布

迷醉.

最新推荐文章于 2024-09-07 17:40:45 发布

阅读量80

点赞数

分类专栏：前端文章标签： css 定位

本文链接：https://blog.csdn.net/qq_35270769/article/details/116896768

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

CSS水平垂直居中的方式

这里先介绍四种常用的

文本方式的水平垂直居中

<style>
        .parent {
            background-color: green;
            width: 200px;
            height: 200px; 
            }
            .child {
                line-height: 200px;   //行高等于父元素的高度，垂直居中
                text-align: center;   //水平居中
            }
</style>
<body>
    <div class="parent">
        <h1 class="child">垂直居中</h1>
    </div>
</body>

效果图：
在这里插入图片描述

绝对定位+margin

<style>
        div {
            background-color: red;
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;    //起到拉伸的作用
        }
</style>
<body>
    <div></div>
</body>

效果图：
在这里插入图片描述

绝对定位+transform属性

<style>
        div {
            background-color: green;
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%); 
        }
</style>
<body>
    <div></div>
</body>

效果图：
在这里插入图片描述

弹性布局方式

<style>
        h1 {
            background-color: green;
            width: 200px;
            height: 200px;
            display: flex;
            justify-content: center;   //水平居中
            align-items: center;   //垂直居中
            }
</style>
<body>
    <div>
        <h1>垂直居中</h1>
    </div>
</body>