Question

我有一个元素，我试图绝对位置到中心和靠近底部。无论我是从右边还是左边做50％，似乎都略微偏离中心。

在此屏幕截图中，您可以看到它距中心左侧有一点点。

enter image description here

a.down {
    font-size:70px;
    color:#fff;
    text-align: center;
    bottom:5%;
    position: absolute;
    right: 50%;
}
<a href="#we-are-the-leader" class="down">
    <i class="fa fa-angle-down"></i>
</a>

Answer 1

如果您愿意使用CSS转换，解决方案非常简单：

a.down {
    font-size:70px;
    color:#fff;
    text-align: center;
    bottom:5%;
    position: absolute;
    right: 50%;
    transform: translateX(50%);
}

由于变换百分比是根据元素的尺寸计算的，因此沿x轴使用正向50％平移只需将元素重新定位到右侧，即其计算宽度的一半 - 实现完美的水平对齐。

如果您使用的是left: 50%，请为翻译使用负值。

Answer 2

如果你的位置绝对相同，你会将元素的边缘相对于right侧。您必须使用边距调整元素的宽度，例如：

margin-right: -35px;

但是，这确实需要您知道项目的宽度。

演示：

a.down {
    font-size:70px;
    text-align: center;
    bottom:5%;
    position: absolute;
    right: 50%;
}

/* Added for demo: */
.fa-angle-down:before { 
  content: '■';
}

a.down {
    border: 1px solid red;
    width: 70px;
    margin-right: -35px;
}

<a href="#we-are-the-leader" class="down">
    <i class="fa fa-angle-down"></i>
</a>

Answer 3

此解决方案将把您放置在包装器中的所有内容集中在一起。

<强> HTML：

<div class="my-class">
    <a href="#we-are-the-leader" class="down">
        <i class="fa fa-angle-down"></i>
    </a>
</div>

<强> CSS：

.my-class {
    font-size:70px;
    text-align: center;
    bottom:5%;
    position: absolute;
    width: 100%;
}

注意：宽度设置为100％。

Answer 4

你可以使用绝对位置技巧如下。

body {
    background: navy;
}
a.down {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5%;
    margin: auto;
    display: table;
    font-size: 70px;
    color: #fff;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<a href="#we-are-the-leader" class="down">
    <i class="fa fa-angle-down"></i>
</a>

Answer 5

以下是我能想到的四种可能方式......

在左侧位置使用calc()。 你需要知道元素的宽度......
在左侧位置使用translateX()并添加负百分比。 无需知道元素的宽度。
如果左侧位置使用简单margin-left并将其设置为元素宽度的负半部分。 你需要知道元素的宽度......
设置left＆amp; right为0并使用margin: auto。 无需知道元素的宽度......

示例（所有元素都是一个在另一个之上，因为位置相同）

CodePen Demo

a.down {
  font-family: 'FontAwesome';
  position: absolute;
  bottom: 5%;
  font-size: 70px;
  color: #fff;
  text-align: center;
  text-decoration: none;
}

a.down:before {
  content: "\f107";
}

a.down-1 {
  left: calc(50% - 22.5px);
}

a.down-2 {
  left: 50%;
  transform: translateX(-50%);
}

a.down-3 {
  left: 50%;
  margin-left: -22.5px;
}

a.down-4 {
  left: 0;
  right: 0;
  margin: auto;
}

Answer 6

这是我的猜测：尝试包装你的＆＃39; a＆＃39;标记为div＆＃34;弯曲成1＆＃34;并且垂直边缘0和水平边缘％（尝试找到最好的％来居中div！）就像这样：

.center{flex : 1;
margin:0 30%;}

您的 HTML ：

<div class="center"></div>

尝试一下。

https://jsfiddle.net/LsgL07en/46/

如何用百分比绝对定位元素？

6 个答案: