实现一个元素水平垂直居中

最新推荐文章于 2023-08-12 22:49:16 发布

送你一朵小花花

最新推荐文章于 2023-08-12 22:49:16 发布

阅读量89

点赞数

本文链接：https://blog.csdn.net/weixin_43507534/article/details/104589893

版权

       ##实现 已知宽高的的一个元素水平垂直居中的方法有
       <style type="text/css">
        /* 以下的所有方法适合已知宽高的时候用 */
        body,p{margin: 0; padding: 0;}
        /*1、 给子元素用margin+子元素要解决margin-top的兼容 */
        /* div{width: 500px;height: 500px;background: #000;margin: 40px;overflow: hidden;}
        p{width: 300px;height: 300px;background: firebrick;margin: 100px;} */
        /* 2、给父元素添加padding 注意父元素得减法或者变成怪异盒子 */
        /* div{width: 300px;height: 300px;background: #000;margin: 40px;padding: 100px;} */
        /* div{width: 500px;height: 500px;background: #000;margin: 40px;padding: 100px;box-sizing: border-box;}
        p{width: 300px;height: 300px;background: firebrick;} */
        /* 3、用元素类型的知识点   vertical-align+text-align */
        /* div{width: 500px;height: 500px;background: #000;margin: 40px;line-height: 500px;text-align: center;}
        p{width: 300px;height: 300px;background: firebrick; vertical-align: middle;display: inline-block;line-height: 300px;} */
        /* 4、用元素类型的知识点   vertical-align+text-align  + span中介*/
        /* div{width: 500px;height: 500px;background: #000;margin: 40px;text-align: center;}
        p{width: 300px;height: 300px;background: firebrick;vertical-align: middle;display: inline-block;line-height: 300px;} 
        span{vertical-align: middle;display: inline-block;height: 100%;} */
        /* 5 定位方法  如果是一个子元素相对于父元素水平垂直居中  子元素只能用绝对定位*/
        /* div{width: 500px;height: 500px;background: #000;margin: 40px;position: relative;} */
        /* p{width: 300px;height: 300px;background: firebrick;position: absolute;top: 100px; left: 100px;} */
        /* p{width: 300px;height: 300px;background: firebrick;position: absolute;top: 50%;margin-top: -150px; left: 50%; 
        margin-left: -150px;} */
        /* p{width: 300px;height: 300px;background: firebrick;position: absolute;margin: auto; left: 0; top: 0; bottom: 0; right: 0;} */
        /* 如果需求是子相对于父元素，方法大体是5大种 */
        /* 如果需求是一个元素相对于浏览器窗口水平垂直居中  目前只能用定位
         定位用绝对或者固定定位都行，如果需求是相对于窗口水平垂直居中的且不动，那么就只能是固定定位
         */
        /* div{width: 500px;height: 500px;background: #000;position: absolute;margin-left: -250px; left: 50%; top: 50%; margin-top: -250px;}
        p{width: 300px;height: 300px;background: firebrick;position: absolute;top: 100px; left: 100px;} */
       
        div{width: 500px;height: 500px;background: #000;position: absolute;margin: auto; top: 0; left: 0; right: 0; bottom: 0;}
        p{width: 300px;height: 300px;background: firebrick;position: absolute;top: 100px; left: 100px;}            
    </style>
</head>
<body>
    <!-- 实现一个元素水平垂直 -->
    <!-- 相对于谁居中？  相对于浏览器窗口     宽高是多少 -->
    <!-- 如果是一个子元素相对于父元素水平垂直居中 -->
    <div>
        <p>子元素</p><span></span>
    </div>
</body>

送你一朵小花花

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现一个元素水平垂直居中

##实现已知宽高的的一个元素水平垂直居中的方法有 <style type="text/css"> /* 以下的所有方法适合已知宽高的时候用 */ body,p{margin: 0; padding: 0;} /*1、给子元素用margin+子元素要解决margin-top的兼容 */ /* ...
复制链接

扫一扫