div垂直居中 css div盒子上下垂直居中

最新推荐文章于 2023-11-27 11:09:04 发布

doubleicon

最新推荐文章于 2023-11-27 11:09:04 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/u011872945/article/details/22196499

版权

html 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

实现Div内部的div居中

<span style="font-size:14px;"><div style="position:absolute;width:100%;height:100%;border:1px solid blue;line-height:100%;vertical-align:middle;">
        <div style="width:400px;height:300px;border:1px solid green;position:absolute;left:50%;top:50%;margin-left:-200px;margin-top:-150px;">
        
        </div>
   </div></span>

水平垂直居中原理介绍
这里使用了绝对定位position:absolute;，使用left和top设置对象距离上和左为50%，但如果设置50%，实际上盒子是没有实现居中效果，所以又设置margin-left:-200px;margin-top:-100px;，这里有个技巧是，margin-left的值是宽度一半，margin-top的值也是对象高度一半，同时设置为负，这样就实现了水平和垂直居中。