绝对定位元素设置水平居中

需求：有时页面内的一些容器需要定位在特定的某个位置，但是需要容器在水平方向上面居中显示，比如页面内的一个背景图里面放置一个容器，使用margin-top不方便，就决定使用绝对定位来设置。

实现方法：
方法一、知道容器尺寸的前提下

.element {width: 600px; height: 400px;position: absolute; left: 50%; top: 50%;margin-top: -200px;    /* 高度的一半 */margin-left: -300px;    /* 宽度的一半 */
}

缺点：该种方法需要提前知道容器的尺寸，否则margin负值无法进行精确调整，此时需要借助JS动态获取。

方法二、容器尺寸未知的前提下，使用CSS3的transform属性代替margin，transform中的translate偏移的百分比值是相对于自身大小的，设置示例如下：

.element {position: absolute; left: 50%; top: 50%;transform: translate(-50%, -50%); /* 50%为自身尺寸的一半 */-webkit-transform: translate(-50%, -50%);
}

缺点：兼容性不好，IE10+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有些不适宜的（手机web开发可忽略）。

方法三、margin: auto实现绝对定位元素的居中

.element {width: 600px; height: 400px;position: absolute;left: 0; top: 0; right: 0; bottom: 0;margin: auto;  /* 有了这个就自动居中了 */
}

绝对定位元素设置水平居中相关推荐

html绝对定位怎么页面居中,绝对定位元素设置水平居中
需求:有时页面内的一些容器需要定位在特定的某个位置,但是需要容器在水平方向上面居中显示,比如页面内的一个背景图里面放置一个容器,使用margin-top不方便,就决定使用绝对定位来设置. 实现方法: ...
【CSS】绝对定位元素设置水平 / 垂直居中 ( 绝对定位元素居中设置 - 先偏移 50% 再回退子元素一半尺寸 | 绝对定位居中设置 )
文章目录一.问题提出二.绝对定位居中设置 1.设置固定尺寸 2.先偏移50%再回退固定值三.绝对定位元素水平 / 垂直居中一.问题提出绝对定位不能通过设置 margin: auto ...
react-native 绝对定位元素设置zIndex层级无效仍旧被遮盖如何设置层级
react-native层级的设置还是和PC.移动端h5不一样的如下图所示(博主指的是右上角的"待审核状态"绝对定位层级被卡片TouchableOpacity覆盖): 以如下代码 ...
html的绝对定位脱离文档流吗,子元素设置绝对定位之后脱离文档流！
子元素设置绝对定位之后脱离文档流之后父容器宽高都为都不撑开了. 很多时候都是宽高都是0: 子元素设置绝对定位如何让子元素自己撑开高度? 下面的这个子元素设置绝对定位后,父元素宽高都为0 了. 如何让 ...
绝对定位元素的margin如何设置
写在前面: 这篇文章其实还是没有谈到为什么绝对定位元素可以设置margin,以及为什么margin设置时的参照物是经过绝对定位后的位置,但是阅读后可以快速掌握绝对定位下的margin应该怎么设置. 1 ...
怎么html让元素脱离文档流,子元素设置绝对定位之后脱离文档流！
子元素设置绝对定位之后脱离文档流之后父容器宽高都为都不撑开了. 很多时候都是宽高都是0: 子元素设置绝对定位如何让子元素自己撑开高度? 下面的这个子元素设置绝对定位后,父元素宽高都为0 了. 如何让 ...
关于css设置元素垂直水平居中的问题
第一种: 利用定位属性实现,但需要知道元素的宽高 <div class="box"></div><style>.box{weight:200px ...
行内元素和块状元素的水平居中设置
我在上一篇文章里总结了一下块状元素.内联元素.内联-块状元素的区别三者的一个重要区别在于是不是独占一行以及能不能设置宽高.内外间距. 在这个前提下,我们应该怎么设置元素在水平方向上的居中呢? 行内元 ...
html绝对定位到相邻元素中间,css – 在另一个元素的中心下方水平居中绝对定位元素...
有不同的方法可以做到这一点,但我发现最简单的方法是对abolute定位元素执行以下操作: top: 0; left: 50%; transform: translateX(-50%); 使用此方法,您 ...

绝对定位元素设置水平居中

绝对定位元素设置水平居中相关推荐

最新文章

热门文章