开发者社区> 问答> 正文

这个代码为什么能够水平和垂直都居中?

margin:auto只能水平居中。
为什么设置了
`
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
`
就能够水平和垂直都居中呢?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        id{
            background: papayawhip;
            width: 200px;
            height: 200px;
            
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
    <body>
        <div id="id">
            
        </div>
    </body>
</html>

展开
收起
杨冬芳 2016-06-13 16:17:49 2074 0
1 条回答
写回答
取消 提交回答
  • IT从业

    .尺寸限制(寬高有限制)
    2.拉伸(有相反的方向屬性:如同時設定top和bottom,left和right)
    3.margin:auto時
    就會有絕對定位元素的絕對居中效果

    Ps:ie8+支持

    2019-07-17 19:36:20
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载