divを縦横に中央に揃える方法は？

Question

私は、ページの中央に（縦と横の両方に）配置したいdivがあります。

水平にセンタリングするには、のタグをdivの周りに使用し、垂直方向のセンタリングには2つの試みが行われていますが、実際には動作しません。

コードをチェックアウト：

CSS：

.vcenter{ 
    height: 50px; 
    width: 50px; 
    background: red; 
    vertical-align: middle; 
    margin-top: calc(50% - 25px); 
} 

HTML：オブジェクトを中央にdiv要素があるの周り

<center> 
    <div class="vcenter"> 

    </div> 
<center> 

また、私は中央のタグを使用してはないと思うがそれには最良の方法です。私が知りたいのは何

は、私は関係なく、画面のサイズが何であるかを垂直方向と水平方向の両方のdivを中央にすることはできませんどのように

• のですか？
• むしろセンタータグを使用するよりも、水平方向のdivを中央に良い方法はありますか？

Answer 1

利用できる場合は、flexを使用するのが最も簡単です。

display: flex; 
align-items: center; 
justify-content: center; 

Answer 2

#divId { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

明らかにされていません唯一のものは、変換されているアカウントに要素のサイズを取ります。