HTML使用绝对定位进行垂直居中

是周珘啊

已于 2022-03-24 11:08:20 修改

阅读量606

点赞数

文章标签： html

于 2022-03-23 21:56:40 首次发布

本文链接：https://blog.csdn.net/awajiwaji/article/details/123697503

版权

HTML使用绝对定位进行垂直居中的方法：

1.父元素为body

position：absolute；

top:50%;

margin-top:-自己高度的一半；

2.当有其他父元素时使用“子绝父相来实现定位”

子绝父相的意思是子元素为绝对定位父元素为相对定位

<style>
    .or{
    width: 400px;
    height: 400px;
    background-color: orangered;
    position: relative;
   
    }
    .pu{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
    position: absolute;
    left: 50%;
    top: 50% ;
    margin-top: -50px;
    margin-left: -50px;

    }
</style>

<body>
    <div class="or">
        <div class="pu"></div>
    </div>
</body>

优惠劵

是周珘啊

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML使用绝对定位进行垂直居中

HTML使用绝对定位进行垂直居中的方法：1.父元素为bodyposition：absolute；top:50%;margin-top:-自己宽度的一半；2.当有其他父元素时使用“子绝父相来实现定位”子绝父相的意思是子元素为绝对定位父元素为相对定位<style> .or{ width: 400px; height: 400px; background-color: orangered; position: relative;
复制链接

扫一扫