我有一个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;
}
注意：为简洁起见，我从上面的类中删除了颜色样式等。
在这里尝试一下。说明：将所有框保留为空白，然后单击下一步>>按钮。您应该会在顶部看到一个粉红色的错误消息div，上面显示“错误：所有字段均为必填”。，但水平定位距离较远。
问题：我无法divErrorMessage在浏览器窗口中水平居中。我很确定这position:fixed是问题所在，但是如果删除它，我的div就会消失并且找不到。left:370px显然也是一个问题。如果将其删除，则div会在浏览器的左侧对齐，并且找不到任何使它居中的方法。
这是我对该div的唯一定位要求：
如果CSS不能轻松做到这一点，那么我也会为jquery解决方案感到高兴，但是我猜想CSS应该很容易。
重要说明：错误消息div和许多内容都位于iFrame中。
如果绝对定位的误差框没有固定值width，则可以通过left: 50%;和组合使用以实现水平对齐transform: translateX(-50%);。
例如：
.ErrorClientSide {
position: fixed;
top: 4px;
left: 50%;
transform: translateX(-50%);
}
为了简洁起见，省略了供应商前缀。
值得注意的是IE9 +支持translate转换。要进一步阅读，您可以参考以下主题：
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句