This article was written in 2010 and remains one of our most popular posts. If you’re keen to learn more about CSS techniques, you may find this of great interest.

本文写于2010年，至今仍是我们最受欢迎的帖子之一。 如果您想了解有关CSS技术的更多信息，您可能会发现这篇有关CSS 。

Centering an absolutely positioned element is a CSS challenge that occurs now and then. The solution seems obvious once I’ve done it, but I still find myself googling the problem every few months.

将绝对定位的元素居中是不时出现CSS挑战。 完成后，解决方案似乎很明显，但是我仍然发现自己每隔几个月就会搜索一次该问题。

Horizontally centering a static element in CSS is normally handled by setting the left and right margins to auto, for example:

通常通过将左右边距设置为auto来处理静态元素在CSS中的水平居中，例如：

.myelement {  margin: 0 auto;}

However, this won’t work on an absolutely positioned element. Its location is determined in relation to the most immediate parent element that has a position value of absolute, relative, or fixed.

但是，这不适用于绝对定位的元素。 相对于具有absolute ， relative或fixed position值的最直接父元素确定其位置。

In the following example, the relative red square has a width set to 40% of the available space. The top-left of the absolutely positioned blue square is positioned 30px across and 10px down:

在下面的示例中，相对的红色正方形的width设置为可用空间的40％。 绝对定位的蓝色方块的左上角跨度为30px，向下为10px：

.outer {  position: relative;  width: 40%;  height: 120px;  margin: 20px auto;  border: 2px solid #c00;}.inner {	  position: absolute;  width: 100px;  height: 100px;  top: 10px;  left: 30px;  background-color: #00c;}

If we’re not concerned about the exact dimensions of our blue box, we could omit the width setting and set the same left and right values. This would effectively center our blue box:

如果我们不关心我们的蓝色方块的确切尺寸，我们可以省略width设置，并设置相同的left和right的值。 这将有效地使我们的蓝框居中：

.outer {  position: relative;  width: 40%;  height: 120px;  margin: 20px auto;  border: 2px solid #c00;}.inner {  position: absolute;  height: 100px;  left: 30px;  top: 10px;  right: 30px;  background-color: #00c;}

So, how can we center our box if it has fixed dimensions? The answer requires a little lateral thinking:

那么，如果盒子有固定的尺寸，我们如何居中呢？ 答案需要一些横向思考：

1. First, we use left: 50%. Unlike background image positions, this will move the left-hand edge of the blue box to the center.

   首先，我们使用left: 50% 。 与背景图像位置不同，这会将蓝色框的左边缘移到中心。

2. Since our box is too far to the right, we use a negative left margin that’s half the box’s width. In our example, we must set margin-left to -50px to shift the box back to the right place.

   由于我们的盒子距离右边太远，因此我们使用负的左边距作为盒子宽度的一半。 在我们的示例中，我们必须将margin-left设置为-50px以将框移回右侧。

Here is the code:

这是代码：

.outer {  position: relative;  width: 40%;  height: 120px;  margin: 20px auto;  border: 2px solid #c00;}.inner {  position: absolute;  width: 100px;  height: 100px;  top: 10px;  left: 50%;  margin-left: -50px;  background-color: #00c;}

The blue box will remain centered no matter how the width of the outer element changes.

无论外部元素的宽度如何变化，蓝色框都将居中。

If you enjoyed reading this post, you’ll love ; the place to learn fresh skills and techniques from experienced developers. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like .

如果您喜欢阅读这篇文章，您将爱上 ； 向经验丰富的开发人员学习新鲜技能的地方。 成员可以立即访问所有SitePoint的电子书和交互式在线课程，例如 。

Comments on this article are closed. Have a question about CSS? Why not ask it on our ?

本文的评论已关闭。 对CSS有疑问吗？ 为什么不在我们的上提问呢？

翻译自: