私はこの問題を約半日解決しようとしています。私はちょうどWebデザインを始めています。私はフォームを水平方向と垂直方向に集中させる必要があります。今は左上にあります。私はすぐにそれを整理しようとしている悪いコードを気にしないでください。水平方向の中心のためのフォームを水平方向と垂直方向にセンタリングする

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>

出典

2016-09-27 Bilbo Baggins

は '表示を削除：テーブル-cell' –

私はそれをしなかったが、それは水平方向にのみ、それを中心に。 –

単純な解決策は次のとおりです。フォームをコンテナdivにラップし、display: flexプロパティを使用して配置を設定します。あなたのbody、htmlとcontainer要素の高さがすべてに設定されていることを確認する必要があり

<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 */ 
}

編集

：

これを試してみてください100％。例えば、このフィドルで

ルック：Fiddle

出典

2016-09-27 19:46:51

私はこれを試して、それを水平に揃えただけです。 –

コンテナ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>

出典

2016-09-27 19:40:17 TSR

これを縦にセンタリングする方法をお考えですか？ –

上向き使用：垂直center.sorryの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; 
}

あなたはしかし、静的なフォームの高さを持っている必要があります。フォームの高さ：100ピクセルはフォームの高さです。マージントップはフォームの高さの50％にする必要があります。

出典

2016-09-27 19:45:47

フォームを水平方向と垂直方向にセンタリングする

答えて

編集

関連する問題