css 不定宽高元素水平垂直居中

最新推荐文章于 2025-06-16 16:15:00 发布

八佾舞于庭

最新推荐文章于 2025-06-16 16:15:00 发布

阅读量840

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 居中 display:flex; position

本文链接：https://blog.youkuaiyun.com/D_claus/article/details/83183604

css 专栏收录该内容

12 篇文章

订阅专栏

方法三种，可以根据实际需求选择。


方法一
<body>
    <div id="box">
        <div id="content">山夫不解数甲子，一叶落知天下秋。</div>
    </div>        
</body>
html,body{
    width:100%;
height:100%;
}
#box { width:100%; height:100%;position:relative;}
#content { width:50%; height:50%;position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; }

方法二 

<body>
    <div id="box">
        <div id="content">吏书翻扬阅千机，一笛行吟狂九歌。</div>
    </div>        
</body>
html,body{
    width:100%;
height:100%;
}
#box { width:100%; height:100%;position:relative;}
#content { position:absolute;left:50%; top:50%;  
transform:translateX(-50%) translateY(-50%); 
-webkit-transform:translateX(-50%) translateY(-50%);

方法三

<body>
    <div id="box">
        <div id="content">吏书翻扬阅千机，一笛行吟狂九歌。</div>
    </div>        
</body>
html,body{
    width:100%;
height:100%;
}
#box { display:flex; display:-webkit-flex; justify-content:center; align-items:center;}//新属性 考虑兼容性问题