兼容IE的完全居中布局

最新推荐文章于 2021-09-28 17:06:09 发布

screaming_color

最新推荐文章于 2021-09-28 17:06:09 发布

阅读量7.7k

点赞数

分类专栏： JavaScript 前端 css 文章标签：完全居中兼容IE 布局

本文链接：https://blog.csdn.net/screaming_color/article/details/51871680

版权

本文介绍了如何在IE浏览器中实现元素的完全居中布局，包括使用绝对定位和Flexbox两种方法。针对IE8不支持`document.getElementsByClassName()`的问题，提供了两种解决方法，并详细讲解了在IE8及以下版本中如何通过JavaScript计算绝对定位的值来实现居中。同时，注意到在IE10及以上版本，使用Flexbox布局也需要类似的处理以确保兼容性。

摘要由CSDN通过智能技术生成

代码详见：
https://github.com/screamingColor/save/blob/master/test/center.html

IE8下的效果：

本文采用绝对定位和flexbox两种方式：

第一种绝对定位方式：
先定位到父元素50%的地方再移动自身的50%

    .outb{
        position: relative;
        height: 200px;
        width: 200px;
        background-color: #E74851;

    }
    #block{

        width: 100px;
        height:100px;
        background:pink;
        position:absolute;
        left:50%;
        top:50%;
        transform: