<布局>子级相对级居中对齐的几种方式

一. 父元素相对定位, 子元素绝对定位,然后右下偏移top: 50%; left: 50%; 再反向偏移transform: transtlate(-50%, -50%), 如果知道子元素的宽高, 也可以直接把反向偏移写死

    <style>
        .absolute001{

            position: relative;

        }
        .absolute001 .son{

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
    <style>
        .absolute002{

            position: relative;


        }

        .absolute002 .son{

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-25px, -50px);


        }



    </style>

二: 与第一种类似,但比较hack, 父元素相对定位,子元素绝对定位,设置margin: auto; 上下左右都为0

    <style>
        .absolute003{

            position: relative;

        }

        .absolute003 .son{

            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;

        }

    </style>

三. 父元素使用flex布局, 横向居中, 纵向居中

    <style>
        .flex001{

            display: flex;
            justify-content: center;
            align-items: center;

        }

    </style>

完整测试:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>元素居中</style>
    <style>


        .father{

            width: 500px;
            height: 200px;
            background-color: #ea6f5a;
            border: 1px solid #d29922;
            margin: 0 auto;
            color: #fdf6e3;
        }

        .son{
            width: 200px;
            height: 100px;
            background-color: #0c8ac5;
        }



    </style>
</head>
<body>

<div class="father absolute001">
    <style>
        .absolute001{

            position: relative;

        }
        .absolute001 .son{

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
    <div class="son">绝对定位: 无需知道子元素宽高</div>
</div>


<div class="father absolute002">
    <style>
        .absolute002{

            position: relative;


        }

        .absolute002 .son{

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-100px, -50px);


        }



    </style>
    <div class="son">绝对定位: 需要知道子元素宽高(比较low)</div>
</div>


<div class="father absolute003">
    <style>
        .absolute003{

            position: relative;

        }

        .absolute003 .son{

            position: absolute;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;



        }


    </style>
    <div class="son">绝对定位: 无需知道子元素宽高(hack玩法, 记得margin: auto)</div>
</div>


<div class="father flex001">

    <style>
        .flex001{

            display: flex;
            justify-content: center;
            align-items: center;

        }



    </style>


    <div class="son">flex定位:无需知道子元素宽高(好用, 推荐)</div>
</div>

</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小狼的世界

jQuery的animate函数

jQuery提供了一个animate函数,可以通过改变CSS属性来实现一些动画效果。

12130
来自专栏十月梦想

Vue同时使用transition(过渡)和animate.css(动画库)

    解决第一次出现没有动画新增apper属性点添加apper-active-class,同时使用过渡和动画,可以在class中新增过渡的calss,v-en...

1K10
来自专栏从零开始学 Web 前端

从零开始学 Web 之 DOM(一)DOM的概念,对标签操作

我们把 html 文件看成一个文档,因为万物皆对象,所以这个文档也是一个对象。这个文档中所有的标签都可以看成一个对象,比如 div 标签,p 标签等。

12620
来自专栏落花落雨不落叶

关于Html与css的一些解释

323120
来自专栏web前端-

HTML基础知识

  属性的作用就是就为元素提供更多的信息,大多数元素都可以拥有属性    属性的语法:<标签 属性1=参数1>   注意空格的使用

49930
来自专栏Java技术分享圈

杨老师课堂之JavaScript案例手动切换轮播图片

        2.1跳转div盒子的布局(宽、高、边框线、水平居中、文字居中...)

13120
来自专栏python3

tkinter -- button1

Tkinter Relief styles: 构件的浮雕式是指某些模拟的3-D周围的部件外的影响

13340
来自专栏一“技”之长

Java开发GUI之单复选框 原

    单复选框在处理一些用户选项时十分方便。在Java的GUI体系中,复选框使用Checkbox类来创建,单选框实际上是将多个复选框结合成为组,同一组的复选框...

8420
来自专栏Java技术分享圈

杨老师课堂之JavaScript案例之自动切换轮播图片

        2.1跳转div盒子的布局(宽、高、边框线、水平居中、文字居中...)

15640
来自专栏老马寒门IT

02-老马jQuery教程-jQuery事件处理

1. 绑简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。 jQuery简单绑定事件...

19180

扫码关注云+社区

领取腾讯云代金券