问题描述：

我已经为大约半天寻找了解决方案。我刚开始网页设计，我需要水平和垂直居中放置一个表格。现在它位于左上角。请不要介意我即将整理好的错误代码。水平和垂直居中表格

form { 
 
\t 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    
 
} 
 

 

 
.trans { 
 
    
 
    background:rgba(1,1,1,0.6); 
 
    
 
} 
 

 
body { 
 
    
 
    background-image: url(wallpaper.jpg);  
 
    
 
} 
 

 
.text { 
 
    
 

 
    
 
} 
 

 
.box { 
 
    
 
    display: table; 
 
    width: 100%; 
 
    
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <link rel="stylesheet" type="text/css" href="style.css"> 
 
     <link rel="icon" type="image/ico" sizes"32x32" href="pths_logo32x.png"> 
 
     <title>Peq Anon</title> 
 
     
 
    </head> 
 
    
 
    <body> 
 

 
     <div class="container"> 
 
      <form> 
 
       <input class="trans text" type="text" name="Password"> 
 
       <button type="submit" onclick="#">Submit</button>  
 
      </form>  
 
     </div> 
 
     
 
     
 
     
 
    </body> 
 
</html>

删除'显示：表cell' –

我这样做，但它只是它的中心水平。 –

答

下面是一个简单的解决方案：将您的表单包装在一个容器div中，并使用display: flex属性来设置对齐方式。

试试这个：

<div class="container"> 
<!-- the rest of your code comes here --> 
</div>

而对于CSS

.container { 
    display: flex; 
    justify-content: center; /* center horizontally */ 
    align-items: center; /* center vertically */ 
}

编辑

你必须确保你的body，html和container元素的高度都被设置为100％。

看这个捣鼓一个例子：Fiddle

我试过了，它只是水平排列。 –

确保容器div横跨文档的整个高度。换句话说，将容器div的高度设置为100％，就像这个'''height：100％''' –

我用一个例子编辑我的文章，这样你就可以得到一个想法。 –

答

使用margin:auto的水平中心使用top:50%和position:relative垂直对齐。不要忘记为容器定义一个height，并且它的位置也是relative。

form { 
 
    margin: auto 
 
    display: table-cell; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    position:relative; 
 
    top: 50%; 
 
    
 
    } 
 
    .container{ 
 
    position.relative; 
 
    height:200px;} 
 
    
 
    
 
    .trans { 
 
    
 
    background:rgba(1,1,1,0.6); 
 
    
 
    } 
 
    
 
    body { 
 
    
 
    background-image: url(wallpaper.jpg);  
 
    
 
    } 
 
    
 
    
 
    
 
    .box { 
 
    
 
    display: table; 
 
    width: 100%; 
 
    
 
    }

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <link rel="stylesheet" type="text/css" href="style.css"> 
 
     <link rel="icon" type="image/ico" sizes"32x32" href="pths_logo32x.png"> 
 
     <title>Peq Anon</title> 
 

 
    </head> 
 

 
    <body> 
 

 
     <div class="container"> 
 
      <form id="form"> 
 
       <input class="trans text" type="text" name="Password"> 
 
       <button type="submit" onclick="#">Submit</button>  
 
      </form>  
 
     </div> 
 

 

 

 
    </body> 
 
</html>

感谢有关如何垂直居中的任何想法？ –

使用顶部：垂直中心的50％。让我完成我的答案。 – TSR

@BilboBaggins您现在可以运行代码片段。我编辑了我的答案..希望它回答你的问题？ – TSR

答

.container { 
    position: absolute; 
    top: 50%; 
    margin-top: -50px; 
    left: 0; 
    width: 100%; 
} 

form { 
    text-align: center; 
    vertical-align: middle; 
    margin-left: auto; 
    margin-right: auto; 
    height: 100px; 
}

你需要有一个静态的形式高度虽然。窗体高度：100px是窗体的高度。保证金最高需要达到你身高的50％。

水平和垂直居中表格

编辑

相关推荐