Question

我对CSS仍然很陌生，但我在stackoverflow上尝试了不同的解决方案，但似乎都没有。

这是父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;
}

儿童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

这是一个相当简单的解决方案，我只需要在子div中添加：

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

如何在没有宽度的情况下水平居中？

3 个答案: