Question

我有一个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>

这是班级：

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

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

Try it out here。说明：将所有框留空，只需点击下一步＆gt;＆gt; 按钮即可。您应该会在顶部显示粉红色的错误消息div，其中显示＆＃34;错误：所有字段都是必需的。＆＃34; ，但水平定位已关闭。

问题：我无法在浏览器窗口中水平居中divErrorMessage。我很确定position:fixed是问题所在，但是如果我删除它，我的div就会消失，而我无法找到它。 left:370px显然也是一个问题。如果我删除它，div在浏览器的左侧对齐，我找不到任何方法来居中它。

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

它需要垂直放置在顶部的棕色标题下方。
需要在浏览器窗口中水平居中。

如果CSS不能轻易做到这一点，我也会对jquery解决方案感到满意，但我猜测这应该很容易用CSS。

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

Answer 1

如果绝对定位的错误框没有固定的width，则可以通过left: 50%;和transform: translateX(-50%);的组合实现水平对齐。

例如：

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

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

值得注意的是translate转换is supported in IE9+。如需进一步阅读，请参阅以下主题：

How to center a "position: absolute" element

Answer 2

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

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

Answer 3

由于您的错误div使用的是固定位置，因此您应相应更改其left和margin-left位置。

假设此错误div的宽度为200px，您可以通过以下更改调整CSS：

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

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

Answer 4

让我们说你的div有宽度：100px，然后你可以做左：50％; margin-left：-50px;

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

或者你可以这样做：

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

这个中心在窗口内划分

Answer 5

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

但首先，请不要使用<center>，因为它已被弃用。

Answer 6

如果要垂直和水平放置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*/;
}

我从How to vertically center a div for all browsers?

提取了这个答案

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

6 个答案: