html - Margin 0 Auto 不适用于 Div CSS

Question

我目前正在尝试将一个带有表单的 div 居中，但它似乎不想以 margin: 0 auto; 居中。我已确保将 display: block; 添加到 div，但它仍然不起作用!

这是我的 HTML:

<div class="card form-card">
        <form class="formPassword" action="" method="post">
            <ul style="list-style-type:none;padding-top:50px;margin-left:-40px;">
                <li>
                    <input class="formInputPassword" type="password" name="current_password" placeholder="Current Password"><br><br><br><br>
                </li>
                <li>
                    <input class="formInputPassword" type="password" name="password" placeholder="New Password"><br><br>
                </li>
                <li>
                    <input class="formInputPassword" type="password" name="password_again" placeholder="Repeat Password"><br><br>
                </li>
                <li>
                    <input type="submit" class="btn btn-primary" value="Save"><br><br>
                </li>
            </ul>
        </form>
</div>

这是我的 CSS:

        .liInline{
            display:inline-block;
            list-style-type:none;
        }
        div.card{
            display:block;
        }
        .card{
            display:block;
            padding: 20px 25px 30px;
            margin: 0 auto 25px;
            width: auto;
        }
        .formInputPassword{
            width:370px;
            height:38px;
            font-size:1.6em;
            text-align:center;
        }

谢谢

Answer 1

解决方案一:

将 text-align: center; 赋给 div.card 将使您的表单居中..

div.card{
    display:block;
    text-align:center;
}

Working Fiddle

解决方案 2:

margin:0 auto; 当它有父 div 和固定宽度时工作。
就像这里我给表格固定宽度和边距:0 自动。将使表单水平居中。

.formPassword{
      margin:0 auto;
       width:250px;
  }

Fiddle

解决方案 3:

如果你不想给定宽度，那就用display:table

.formPassword {
    display: table;
    margin: 0 auto;
}

Fiddle