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％。由于某种原因，这是有效的。它设法将我的Login类对齐到Horizontal中心。我试图通过从页面缩小到最远来测试它，但它仍然保持不变。不同的百分比反应方式无视我的数学我已经在每个浏览器上测试了它，结果是一样的。

有人可以解释发生了什么吗？

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;
}

CSS水平对齐与宽度百分比奇怪地相互作用

1 个答案:

HTML

CSS