前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 ><布局>子级相对级居中对齐的几种方式

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

作者头像
zhaoolee
发布2018-04-19 17:05:25
1.3K0
发布2018-04-19 17:05:25
举报
文章被收录于专栏:木子昭的博客
一. 父元素相对定位, 子元素绝对定位,然后右下偏移top: 50%; left: 50%; 再反向偏移transform: transtlate(-50%, -50%), 如果知道子元素的宽高, 也可以直接把反向偏移写死
代码语言:javascript
复制
    <style>
        .absolute001{

            position: relative;

        }
        .absolute001 .son{

            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
代码语言:javascript
复制
    <style>
        .absolute002{

            position: relative;


        }

        .absolute002 .son{

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


        }



    </style>
二: 与第一种类似,但比较hack, 父元素相对定位,子元素绝对定位,设置margin: auto; 上下左右都为0
代码语言:javascript
复制
    <style>
        .absolute003{

            position: relative;

        }

        .absolute003 .son{

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

        }

    </style>
三. 父元素使用flex布局, 横向居中, 纵向居中
代码语言:javascript
复制
    <style>
        .flex001{

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

        }

    </style>
完整测试:
代码语言:javascript
复制
<!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>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.03.08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一. 父元素相对定位, 子元素绝对定位,然后右下偏移top: 50%; left: 50%; 再反向偏移transform: transtlate(-50%, -50%), 如果知道子元素的宽高, 也可以直接把反向偏移写死
  • 二: 与第一种类似,但比较hack, 父元素相对定位,子元素绝对定位,设置margin: auto; 上下左右都为0
  • 三. 父元素使用flex布局, 横向居中, 纵向居中
  • 完整测试:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档