无法水平居中div，涉及的位置固定

I have a div that I want to center horizontally inside my browser window without changing the vertical position. Here's my div:

我有一个div,我想在浏览器窗口中水平居中,而不改变垂直位置。这是我的div:

<div id="divErrorMessage" class="ErrorClientSide">
    <div class="ui-icon ui-icon-info" style="float: left; margin-right: 6px;"></div>
    <div id="divErrorMessageText" style="margin-left: 6px;margin-top: 2px;">{ERROR MESSAGE HERE}</div>
    <img src="./Images/Icons/tinyx.png" style="position: absolute; top: 4px; right:4px; cursor:pointer" onclick="closeErrorMessage();" />
</div>

And here's the class:

这是班级:

.ErrorClientSide {
  display: none;
  position: fixed;
  top: 4px;
  left: 370px;
  padding: 10px 25px 10px 25px;
  border-radius: 7px;
}

Note: I removed the color styles and such from the class above for brevity.

注意:为了简洁起见,我从上面的类中删除了颜色样式等。

Try it out here. Instructions: Leave all boxes blank and just click the Next >> button. You should see a pink error message div appear at the top that says "Error: All fields are required.", but the horizontal positioning is way off.

在这里尝试一下。说明:将所有框留空,只需单击下一步>>按钮。您应该会在顶部看到一个粉红色的错误消息div,显示“错误:所有字段都是必需的。”,但水平定位是关闭的。

Problem: I cannot center divErrorMessage horizontally in my browser window. I'm pretty sure that position:fixed is the problem, but if I remove that, my div disappears and I can't find it. left:370px is clearly a problem as well. If I remove that, the div aligns at the left of the browser and I can't find any way to center it.

问题:我无法在浏览器窗口中水平居中divErrorMessage。我很确定这个位置:修复是问题,但是如果我删除它,我的div消失了,我找不到它。左:370px显然也是一个问题。如果我删除它,div在浏览器的左边对齐,我找不到任何方法来居中它。

Here are my only positioning requirements for this div:

以下是我对此div的唯一定位要求:

It needs to be positioned vertically a little below the brown header at the top.

它需要垂直放置在顶部的棕色标题下方。

It needs to be horizontally centered in the browser window.

它需要在浏览器窗口中水平居中。

If CSS can't do this easily I would be happy for a jquery solution as well, but I'm guessing this should be easy with CSS.

如果CSS不能轻易做到这一点,我也很乐意使用jquery解决方案,但我猜这应该很容易用CSS。

Important note: The error message div and much of the content is inside an iFrame.

重要说明:错误消息div和大部分内容都在iFrame中。

6 个解决方案

#1

If the absolutely positioned error box doesn't have a fixed width, you could achieve the horizontal alignment by a combination of left: 50%; and transform: translateX(-50%);.

如果绝对定位的错误框没有固定宽度,则可以通过左边的组合实现水平对齐:50%;和转换:translateX(-50%);.

For instance:

.ErrorClientSide {
  position: fixed;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
}

Vendor prefixes omitted due to brevity.

由于简洁,省略了供应商前缀。

It's worth noting that translate transform is supported in IE9+. For further reading you could refer to the topic below:

值得注意的是IE9 +支持translate转换。如需进一步阅读,请参阅以下主题:

How to center a "position: absolute" element

如何将“position:absolute”元素居中

#2

As your error div is using a fixed position, you should change its left and margin-left position accordingly.

由于您的错误div使用固定位置,您应该相应地更改其左侧和左侧位置。

Let's suppose this error div will have a width of 200px, you could adjust your CSS with the following change:

假设这个错误div的宽度为200px,你可以通过以下更改来调整CSS:

 .ErrorClientSide {
    left: 50%;
    margin-left: -100px;
 }

Your margin-left attribute should be the negation of half your div's width (for instance, if your div's width is 378px instead of 200px, you should use margin-left: -189px;).

您的margin-left属性应该是div宽度的一半(例如,如果你的div的宽度是378px而不是200px,你应该使用margin-left:-189px;)。

#3

it actually is located outside the form - which means it's falling in the DOM below the form if position is not fixed. If you want to not move it - you'll need a negative positioning top and a width sort of like this:

它实际上位于表单之外 - 这意味着如果位置不固定,它将落在表单下方的DOM中。如果你不想移动它 - 你需要一个负面定位顶部和宽度类似如下:

.ErrorClientSide {
display: block;
position: relative;
top: -319px;
width: 300px;
margin: 0 auto;
}

#4

Remove position, top and left and use margin: 0 auto and width. Modify the markup to put divErrorMessage before the form. Or wrap it with an absolute position div then center it inside of that.

移除位置,顶部和左侧并使用边距:0自动和宽度。修改标记以将divErrorMessage放在表单之前。或者用绝对位置div包装然后将其置于其中。

But first, please don't use <center> as it's been deprecated.

但首先,请不要使用

,因为它已被弃用。

#5

Lets say your div has width: 100px, then you can do left: 50%; margin-left: -50px;

让我们说你的div有宽度:100px,然后你可以做左:50%; margin-left:-50px;

.ErrorClientSide {
  display: none;
  position: fixed;
  top: 4px;
  width: 100px;
  left: 50%;
  margin-left: -50px;
}

Alternatively you can do:

或者你可以这样做:

.ErrorClientSide {
  display: none;
  position: fixed;
  top: 4px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

This centre you div inside window

这个中心你在窗口内

#6

-2

If you want to position a DIV vertically and horizontally you have to wrap it in 3 divs.

如果要垂直和水平放置DIV,则必须将其包裹在3个div中。

<div class="outer">
<div class="middle">
<div class="inner">

<h1>The Content</h1>

<p>Once upon a midnight dreary...</p>

</div>
</div>
</div>

CSS

.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}

.middle {
display: table-cell;
vertical-align: middle;
}

.inner {
margin-left: auto;
margin-right: auto; 
width: /*whatever width you want*/;
}

I pulled this answer from How to vertically center a div for all browsers?

我从如何垂直居中所有浏览器的div中提取了这个答案?

#1