CSS样式之absolute居中的三种方法

阅读量： 4082 发布日期： 2022-10-27 07:44:00

CSS样式中的absolute居中有三种方法，分别是相对于元素的left、right和bottom。这三种方法的区别是：left和right方法的居中是相对于元素的左边和右边的，而bottom方法的居中是相对于元素的底部的。

CSS样式之absolute居中的三种方法 1、absolute居中的原理

绝对定位的元素会相对于最近的已定位的祖先元素进行定位。如果元素没有已定位的祖先元素，则会相对于最近的包含块进行定位。如果一个元素的祖先元素都没有定位，那么该元素会相对于文档的body元素进行定位。要想让absolute定位的元素居中，只需设置其left和top属性为50%即可。这是因为设置为50%时，元素的左上角会相对于其包含块的左上角居中。而元素的包含块正是我们所要的居中目标元素。为了使整个元素向左上方移动50%的距离，我们还需要指定元素的margin-left和margin-top为负的自身宽度和高度的一半。这样，我们就能让元素整体向左上方移动50%的距离，从而实现了居中。

2、三种absolute居中方法

第一种方法是使用绝对定位的left和right属性，将元素同时放置到水平方向的两端。当元素在两端同时设置了绝对定位时，元素会保持在两端之间，并且元素的宽度会根据内容自动调整。第二种方法是使用绝对定位的left属性和transform属性，将元素向左侧移动50%，然后使用负半个元素宽度的margin-left属性将元素向右侧移动50%，这样就能够将元素移动到水平方向的中心位置。第三种方法是使用绝对定位的left属性和transform属性，将元素向右侧移动50%，然后使用负半个元素宽度的margin-left属性将元素向左侧移动50%，这样就能够将元素移动到水平方向的中心位置。

3、使用情况分析

对于absolute居中的使用情况，主要取决于页面布局。如果页面布局是固定宽度或者是流式布局，那么absolute居中是比较容易实现的。但是如果页面布局是不定宽度或者是响应式布局，那么absolute居中会相对困难一些。需要结合media query进行调整。

4、案例分享

方式一

<div class="ago">

   <div class="mid"></div>
</div>

.ago{

    width:400px;

    height:200px;

    background:#ccc;

    position:relative;
}
.mid{

    width:50px;

    height:50px;

    background:red;

    position:absolute;

    left:50%;

    top:50%;

    margin:-25px 0 0 -25px;
}

方式二：

<div class="nb">

     &nbsp;<div class="middle"></div>
</div>

.nb{

     width:400px;

     height:200px;

     background:#ccc;

     text-align:center;

     overflow:hidden;
}
.middle{

    display:inlineblock;

    *display:inline;*zoom:;

    width:50px;height:50px;

    background:green;

    position:absolute;

    margin-left:-38px;

    margin-top:75px;
}

方式三：

<div class="db">

    <div class="dm"></div>
</div>

.db{

    width:400px;

    height:200px;

    background:#ccc;
}
.dm{

    width:50px;

    height:50px;

    background:pink;

    position:absolute;

    left:;right:;

    top:;bottom:;

    margin:auto;
}

5、小结

综合以上三种方法，可以根据实际情况进行选择。一般情况下，如果需要将元素居中，并且不需要考虑兼容性问题，可以使用第二种方法。如果需要兼容IE8及以下版本，可以使用第三种方法。

absolute居中的方法很多，前面已经介绍了三种方法。其实，还有很多种方法可以选择，比如相对于元素的top、leftmargin和rightmargin等。不同的方法可以达到不同的效果，所以在使用absolute居中时要根据具体的情况选择合适的方法。

作者: bosscms，转载时必须经得同意并以链接形式注明作者和原始出处及本声明。

CSS样式