CSS中常用的定位居中实现方式

最新推荐文章于 2023-05-18 10:29:14 发布

ltians95817

最新推荐文章于 2023-05-18 10:29:14 发布

阅读量1.2k

点赞数

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

本文链接：https://blog.csdn.net/ltians95817/article/details/112138269

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

页面HTML代码部分

<style>
    .wrap{
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        border: 1px solid #333;
    }

    .content{
        width: 200px;
        height: 200px;
        background-color:cadetblue;
    }
</style>
<body>
    <div class="wrap">
        <div class="content">
            <span class="con">--居中--</span>
        </div>
    </div>   
</body>

效果图如下

未添加css居中样式的效果图

一. 常用居中方法

行内元素居中：
水平居中，父元素设置 **text-align: center;**属性即可

    .content{
        width: 200px;
        height: 200px;
        background-color:cadetblue;
        text-align: center;
        overflow: hidden;
    }

    .con{
        background-color: burlywood;

    }

在这里插入图片描述
父元素设置 **line-height: 200px;**属性，具体的属性值为height的值，可以实现行内元素垂直方向上居中显示。

    .content{
        width: 200px;
        height: 200px;
        background-color:cadetblue;
        text-align: center;
        line-height: 200px;
        overflow: hidden;
    }

在这里插入图片描述

块状元素
margin左右方向：auto 可以使标签水平方向居中

    .content{
        width: 200px;
        height: 200px;
        background-color:cadetblue;
        text-align: center;
        line-height: 200px;
        margin-left: auto;
        margin-right: auto;
        overflow: hidden;
    }

在这里插入图片描述

父级元素设置相对定位或绝对定位，目标元素设置绝对定位，+ margin 设置可以实现水平垂直居中
margin-left / margin-right 设置为width 的一半，取负值；
margin-top / margin-bottom 设置为height 的一半，取负值；这种设置方法为 width，height 固定已知的情况下。

    .wrap{
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        border: 1px solid #333;
        position: relative;
    }

    .content{
        width: 200px;
        height: 200px;
        background-color:cadetblue;
        text-align: center;
        line-height: 200px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top: -100px;

    }

在这里插入图片描述

绝对定位 + transform width，height 未知

可以实现水平垂直居中

    .wrap{
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        border: 1px solid #333;
        position: relative;
    }

    .content{
        /* width: 200px;
        height: 200px; */
        background-color:cadetblue;
        text-align: center;
        line-height: 200px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);

    }

在这里插入图片描述
上图设置了 line-height 属性，高度可以看到，不设置 line-height ，目标元素将有内容撑开。
translate属性可以设置水平，垂直2个方向，
translateY属性直接设置垂直方向；translateX直接设置水平方向；可以通过这2个属性结合以上内容，直接让目标元素水平，或垂直方向居中。

5. 定位+margin 设置
目标元素设置为绝对定位，top ，right， bottom，left 分别设置为0，margin设置为auto

    .wrap{
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        border: 1px solid #333;
        position: relative;
    }

    .content{
        width: 200px;
        height: 200px;
        background-color:cadetblue;
        text-align: center;
        line-height: 200px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;

    }

在这里插入图片描述

7. display：flex 设置弹性盒子
父级元素设置弹性盒子
垂直方向居中：align-items: center;
水平方向居中： justify-content:center;

    .wrap{
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        border: 1px solid #333;
        /* position: relative; */
        display: flex;
        align-items: center;
        justify-content:center;
    }

在这里插入图片描述

设置display：table + margin 实现水平居中
目标元素margin设置为auto；

    .wrap{
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        border: 1px solid #333;
        
    }

    .content{
        width: 200px;
        height: 200px;
        background-color:cadetblue;
        text-align: center;
        line-height: 200px;
        display: table;
        margin: auto;

    }

在这里插入图片描述

设置display：table-cell + vertical-align 垂直居中
父元素设置display：table-cell + vertical-align ：middle属性

  .wrap{
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        border: 1px solid #333;
        display: table-cell;
        vertical-align: middle;
    }

    .content{
        width: 200px;
        height: 200px;
        background-color:cadetblue;
        text-align: center;
        line-height: 200px;

    }

在这里插入图片描述
第10，11点结合可以实现水平垂直居中

    .wrap{
        width: 300px;
        height: 300px;
        background-color: antiquewhite;
        border: 1px solid #333;
        display: table-cell;
        vertical-align: middle;
    }

    .content{
        width: 200px;
        height: 200px;
        background-color:cadetblue;
        text-align: center;
        line-height: 200px;
        display: table;
        margin: auto;

    }

在这里插入图片描述

ltians95817

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS中常用的定位居中实现方式

页面HTML代码部分<style> .wrap{ width: 300px; height: 300px; background-color: antiquewhite; border: 1px solid #333; } .content{ width: 200px; height: 200px; background-color:cadetblue;
复制链接

扫一扫