4  

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”元素居中

0  

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;)。

0  

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;
}

0  

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

0  

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

这个中心你在窗口内

-2  

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

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

The Content

Once upon a midnight dreary...

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中提取了这个答案?