利用position相对绝对定位和负边距实现水平垂直居中

绝对定位与浮动类似，也是会脱离文档流；绝对定位的方式实现居中，需要在已知宽高的情况下；
代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中</title>
    <style type="text/css">
        .container {
            width: 600px;
            height: 300px;
            background-color: #ccc;
            position: relative;
        }
        .center-p {
            background-color: yellow;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            height: 80px;
            margin: auto;  /*先水平居中*/
            margin-top: -50px;
            margin-left: -40px;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="center-p">
            table-cell居中
        </div>
    </div>
</body>
</html>
Paste_Image.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1赞 92
  • 如何实现元素的水平垂直居中
    收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 12,533评论 3赞 30
  • 利用position相对绝对定位实现水居中
    虽然都是绝对定位，但是跟绝对定位加负边距的那种居中方式不一样，这种绝对定位的居中方式是将上下左右都设置为0；代码如下：
    凌Linny阅读 3,345评论 0赞 0
  • 浮动定位BFC边距合并
    relative:生成相对定位的元素，通过top,bottom,left,right的位置相对于其正常位置进行定位...
    zx9426阅读 4,560评论 0赞 2
  • 你的生活也许正是别人所向往的
    之前看大冰的书，他常在书中说：“在这个世界上真的有人在过着你想要的生活。”这个我相信，大千世界，很多人既可以朝九晚...
    文婉豫阅读 6,961评论 6赞 3