Question

下面是我的asp.net表单的代码，我想在中心显示表单内容。第一个div的样式是正在制作表单中心但是对于第二个div，内容不居中。

<head runat="server">
    <title></title>
</head>
<style type="text/css">
  #frm { position: fixed;
         top: 50%;
         left: 50%;
         width: 50%;
         height: 200px;
         margin: -100px 0 0 -25%;}
  </style>
<body>
<div id="frm">
    <form id="form1" runat="server">
    <div style="margin-left:auto;">
    <asp:TextBox ID="txtbx" runat="server"></asp:TextBox>
    <br />
    <br />
    <asp:Button ID="button1" runat="server" Text="Submit" OnClick="btn_click" />
    <asp:Button ID="button2" runat="server" Text="Next" OnClick="btn_clicked" />
    <hr />
    <asp:Label ID="label1" runat="server"></asp:Label>
    </div>
    </form>
</div>
</body>

Answer 1

使用以下内容更新您的风格。

#frm { position: fixed;
     top: 50%;
     left: 50%;
     width: 50%;
     height: 200px;
     margin: -100px 0 0 -25%;
     text-align: center;
 }

Answer 2

您应该使用margin: auto;将父母中的任何div居中。如果你想使用它，你必须设置div的宽度。

#frm {
    width: 50%;
    margin: 0 auto;
}

#form1 {
    width: 100%;
}

#form1 > div {
    width: 80%;
    margin: 0 auto;
}

如何使页面内容居中

2 个答案: