代码之家 › 专栏 › 技术社区 › ilhan

如何使窗体水平和垂直居中?

alignment location forms css html

ilhan · 技术社区 · 14 年前

我有一个形式内身体 . 我正在尝试替换屏幕中间/中间的窗体。有没有一个合适的方法在CSS中做到这一点?

-----------------------
-                     -
-                     -
-                     -
-          M          -
-                     -
-                     -
-                     -
-----------------------

2 回复 | 直到 13 年前

Mahdi.Montgomery 14 年前

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <head>
     <title>Vertical/Horizontal Align</title>
     <style type="text/css">
         form {
             height:400px;
             width:400px;
             position: absolute;
             left: 50%;
             top: 50%;
             background-color:#CCC;
             /* Set margins to offset 50% of the w/h */
             margin: -200px 0 0 -200px;
         }
     </style>
 </head>
 <body>
     <form action="/something">
         <p>
          <label>NAME: </label> <input type="text" name="Name" />
         </p>
         <p>
         <label>PHONE: </label> <input type="text" name="Phone" />
         </p>
     </form>
 </body>
 </html>

-1

lock 14 年前

form{
   width: 50%;
   margin: 0 auto;
}

推荐文章

Riddhi · 在ionic中对齐按钮

7 年前

Joshua Sparkel · 排列的元素相差几个像素

7 年前

ProtectedVoid · CSS宽度自动和向左浮动-允许溢出

7 年前

Josh Rodgers · 居中网格项目

7 年前

Jean Jacquemier · Apache箭头、对齐和填充

7 年前

Zubair · 与UILabel绘图/显示在屏幕上相关的方法

7 年前

user7055375 · 除了“文本对齐:居中把东西放在一个DIV里?

7 年前

KevinM · 在导航栏引导程序4中将图标与文本对齐

7 年前

KhiladiBhaiyya · 如何将引导程序导航栏最左边的项移到更远的左边

7 年前

Sujal · UIAlertController中的居中对齐图像操作

7 年前