html - CSS 水平对齐方式与宽度百分比的关系很奇怪

Question

我知道这可能会让很多人感到困惑，因为它对我来说没有意义。

我正在尝试创建一个登录页面，其中凭据位于页面的中心(水平和垂直中心)。
我已经做到了这一点，但在实现这一目标的过程中，我遇到了一些我不太理解的事情。

这是我的 HTML 代码:

<div class="LoginWrapper">
<div class="Login">
    <div id="Username" title="Register Number">
        <asp:Label ID="UsernameLabel" runat="server" Text="Username" AssociatedControlID="UserNameTextBox"></asp:Label>
        <asp:TextBox ID="UserNameTextBox" runat="server" CssClass="LoginTextBox"></asp:TextBox>
    </div>
    <div id="Password" title="Password">
        <asp:Label ID="PasswordLabel" runat="server" Text="Password" AssociatedControlID="PasswordTextBox"></asp:Label>
        <asp:TextBox ID="PasswordTextBox" TextMode="Password" runat="server"></asp:TextBox>
    </div>
    <div><asp:Button ID="Button1" runat="server" Text="Login" />
        </div>
</div>

这是我负责对齐的 CSS 类

.LoginWrapper {
    width:1%;  //This is where it gets weird
    height:500px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

.Login {
    width:300px;
    height:auto;
    margin:10px;
    padding:20px;
    display:inline-block;
    text-align:center
}

如您所见，在我的 LoginWrapper 类中，我设置了宽度:1%。出于某种原因，这行得通。它设法将我的登录类对齐到水平中心。我试图通过从页面缩小到最远来测试这一点，但它仍然保持不变。不同百分比的 react 方式与我的数学相悖
我在每个浏览器上都测试过，结果都是一样的。

谁能解释一下发生了什么？

Answer 1

这是我的回答示例:

JSFIDDLE

HTML

<div class="LoginWrapper center">
    <div class="Login center">
        <div id="Username" title="Register Number">
            <asp:Label ID="UsernameLabel" runat="server" Text="Username" AssociatedControlID="UserNameTextBox"></asp:Label>
            <asp:TextBox ID="UserNameTextBox" runat="server" CssClass="LoginTextBox"></asp:TextBox>
        </div>
        <div id="Password" title="Password">
            <asp:Label ID="PasswordLabel" runat="server" Text="Password" AssociatedControlID="PasswordTextBox"></asp:Label>
            <asp:TextBox ID="PasswordTextBox" TextMode="Password" runat="server"></asp:TextBox>
        </div>
        <div>
            <asp:Button ID="Button1" runat="server" Text="Login" />
        </div>
    </div>
</div>

顺便说一句，你缺少 1 </div> ;

CSS

.LoginWrapper {
    width:100%; 
    height:500px;
    /*display:table-cell; */ no need
    text-align:center;
    vertical-align:middle;
    background:gray;
}
.Login {
    width:300px;
    height:200px;
    margin:10px;
    padding:20px;
    display:inline-block;
    text-align:center;
    background:blue;
}
.center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}