保证金0自动不适用于Div CSS

Question

我目前正在尝试将div的内部居中放置其中的表单，但是它似乎不想以margin: 0 auto;为中心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

解决方案1：

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

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

工作小提琴

解决方案2：

margin:0 auto; 当它具有父div和固定宽度时有效。
像这里，我给表单固定宽度，margin：0自动。 将使表格水平居中。

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

小提琴

解决方案3：

如果不想给定宽度，请使用display:table

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

小提琴

Answer 2

如果您想在表格中居中，可以在卡片类中将文字居中对齐，例如

.card{
            display:block;
            padding: 20px 25px 30px;
            margin: 0px auto;

            background:gray;
            text-align:center;
        }

希望对您有帮助。