azsx582
她还留着短发吗
采纳率50%
2020-12-21 21:24

css设置垂直水平居中的小问题

已采纳

刚入门,看这个代码时有个疑问,这是先给父元素相对定位,再给子元素绝对定位:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a1{width: 400px;height: 400px;background-color: green;position: relative;}
        .a2{width: 200px;height: 200px;background-color: red;position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: 0 auto;}
    </style>
</head>
<body>
    <div class="a1">
        <div class="a2">aaaaa</div>
    </div>
</body>
</html>

 这是我写的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a1{width: 400px;height: 400px;background-color: green;}
        .a2{width: 200px;height: 200px;background-color: red;margin: 0 auto;}
    </style>
</head>
<body>
    <div class="a1">
        <div class="a2">aaaaa</div>
    </div>
</body>
</html>

我这样写得到的效果和先给父元素相对定位,再对子元素绝对定位看起来是一样的,为什么网上搜到的都是后面的方法呢?我写的那个标不标准,或者说有没有什么错误?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

7条回答

  • weixin_46352236 离恢 4月前

    flex布局最大的缺点就是兼容性不好,还是用相对定位比较好

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .a1{width: 400px;height: 400px;background-color: green;position: relative;}
            .a2{width: 200px;height: 200px;background-color: red;position: absolute;top: 50%;left: 50%;right: 0;bottom: 0;    transform: translate(-50%, -50%);}
        </style>
    </head>
    <body>
        <div class="a1">
            <div class="a2">aaaaa</div>
        </div>
    </body>
    </html>
    点赞 2 评论 复制链接分享
  • ZSH_jerry shuxhan 4月前

    你写的只是水平居中,上面那种是水平垂直居中,不一样的概念

    点赞 1 评论 复制链接分享
  • weixin_42508580 undefined?1:0 4月前
    position: absolute; 元素居中显示css
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
    点赞 评论 复制链接分享
  • weixin_48524550 root0006. 4月前

    建议使用flex布局

    点赞 评论 复制链接分享
  • alnorthword 禅思院 4月前

    谢谢关注一波啊

    点赞 评论 复制链接分享
  • alnorthword 禅思院 4月前
        transform: translate(-50%, -50%);

    你再绝对定位上加上移动位置  不然不会垂直和水平居中的

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .a1{width: 400px;height: 400px;background-color: green;position: relative;}
            .a2{width: 200px;height: 200px;background-color: red;position: absolute;top: 0;left: 0;right: 0;bottom: 0;    transform: translate(-50%, -50%);}
        </style>
    </head>
    <body>
        <div class="a1">
            <div class="a2">aaaaa</div>
        </div>
    </body>
    </html>
    点赞 评论 复制链接分享
  • weixin_42508580 undefined?1:0 4月前
    点赞 评论 复制链接分享

相关推荐