水平居中对齐位置绝对对象答案

【问题标题】：center align position absolute object horizontally水平居中对齐位置绝对对象
【发布时间】：2017-06-23 10:53:31
【问题描述】：

我有一个元素，其位置是绝对的，我面临的唯一问题是我应用了一些属性将其水平居中对齐，它在 mozilla 上运行良好，但相同的属性在 chrome 上不起作用这是我的代码

html

<a href="#section1" class="scrollTo downarrow"><img src="images/navbar_downarrow.png" class="img-responsive"/></a>

css

    .slider{
        position: relative;
        background-image: url("../images/slider.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    .slider a.downarrow{
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        bottom: 20px;
        display: table;
    }

【问题讨论】：

yup 删除它输入错误
你知道向下箭头的宽度吗？
width:100% for chrome 但仍然有效
看来您需要将宽度指定为.slider，例如width: 100vw;
非常有用的指南：css-tricks.com/centering-css-complete-guide

标签： css

【解决方案1】：

使元素居中的一个有用技巧是将transform: translate 样式与top、margin-left left 或margin-top 一起使用。

要回答您的问题，您必须将以下样式应用于您的 .slider a.downarrow 元素：

left: 50%;
transform: translateX(-50%);

这是因为如果translate 与百分比值一起使用，它的值是根据应用它的元素的高度/宽度计算的。

top、margin-left left 和 margin-top 百分比值是基于父元素计算的，或者如果元素应用了position: absolute，则基于最近的父元素position: relative/absolute。

要使元素居中，您只需将值 50% 应用到 top、margin-left left 或 margin-top 并将值 -50% 应用到 translate。

对于left 和margin-left，您必须使用translateX(-50%)，对于其他translateY(-50%)。

编辑：添加说明

【讨论】：

哇，这真是一个发现。谢谢你的问题和答案。救了我的命！
此方法的一个值得注意的警告是，大小只会增长到定位父级宽度的 50%。如果你需要比这个更大，你必须为 div 定义一个宽度。