使用table-cell，inline-block实现水平垂直居中

适合在不知道居中元素的宽高的情况下使用；

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中</title>
    <style type="text/css">
        .container {
            /*父级元素需要规定宽高*/
            width: 600px;
            height: 300px;
            /*使行内元素或者行内块级元素水平居中*/
            text-align: center;  
            background-color: #ccc;
            display: table-cell;
            vertical-align: middle;
        }
        .center-p {
            background-color: yellow;
            display: inline-block;
        }

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

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,862评论 1赞 92
  • 如何实现元素的水平垂直居中
    收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 8,253评论 3赞 30
  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,401评论 25赞 709
  • 上海片场学习记
    2017年4月19日，上海 印象中的上海，跟我想的差不多，又跟我想的不同，而第一餐是车上认识的上海小伙吴俊强...
    流芳百世阅读 480评论 0赞 1
  • 婆媳关系，哈哈哈
    时值今日，我已经当了快16年的儿媳妇了，总结一下我和婆婆的相处之道。 真心对待老人 时刻记住，她是你老公的亲娘，没...
    冬阳一缕阅读 371评论 2赞 3