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

2020-03-21 18:04:49 阅读：178 来源： 互联网

标签：居中定位元素容器 top 50% transform margin left

需求：有时页面内的一些容器需要定位在特定的某个位置，但是需要容器在水平方向上面居中显示，比如页面内的一个背景图里面放置一个容器，使用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;  /* 有了这个就自动居中了 */
}

本文转载于:猿2048➺https://www.mk2048.com/blog/blog.php?id=hhiai1ickjb

标签：居中,定位,元素,容器,top,50%,transform,margin,left
来源： https://www.cnblogs.com/homehtml/p/12540626.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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