我应该如何将没有宽度的 div 水平居中？

Question

我对 CSS 还是很陌生，但我在 Whosebug 上尝试了不同的解决方案，但 none 似乎有效。

这里是 parent div ：（现有应用程序，所以我无法控制内联样式，因此使用 !important）

element.style {
    display: block;
    height: 662px;
    width: 1460px;
}
#ModalScroll{
    position:fixed !important;
    top:0;
    left:0;
    z-index:1001; 
    height:1px;
    width:1px;
    overflow:hidden;
    display:none;
    font-size:100%;
    text-align:center;
}

Child div :

element.style {
    display: block;
    left: 470px;
    margin-top: 150.5px;
    top: 315px;
    width: 500px;
}

.ModalDialog{
    border:1px solid #3C4749;
    background-color:#FFF;
    margin:0 auto 0 auto;
    display:none;
    position:absolute !important;
    font-size: 12px;
    top: 0px !important;
    box-sizing: border-box; 
    text-align: center; 
    vertical-align: middle;

div 可以有不同的宽度，它在垂直方向上完全居中，但我不能在水平方向上这样做。

Answer 1

您可以使用 position:absolute 和翻译技巧：

yourDiv{
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

Answer 2

这也可以集中一个元素（有宽度）

{
    margin-left:auto;
    margin-right:auto;
}

Answer 3

这是一个相当简单的解决方案，我只需要添加 child div:

{
...
    right: 0px !important;
    left : 0px !important;
}

我应该如何将没有宽度的 div 水平居中？

How should i center horizontally a div without width?

html

css

centering