divの内側をdiv内に整列する方法

Question

divの中に別のdivを作成しました。私はこれらの点線を...は親divの中央にする必要があります（水平および垂直）。私を助けてください。ありがとうございました。

<div class = "test" style = "width: 32px; height: 22px; display: inline-block; border: 1px solid; border-radius: 5px; text-align: center;"> 
 
\t <div style = "display: inline-block;">...</div> 
 
</div>

Answer 1

一つの可能​​性（そして多くがある）CSS Flexible Box Layoutを使用することができます。

justify-contentプロパティを使用すると、メイン軸に沿ってアライメントを定義し、align-itemsプロパティを使用して、フレックスアイテムが交差軸に沿ってどのように配置されるかを定義できます。

あなた.testコンテナは、次のようになります：

.test { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

あなたはthis JSFiddle上の例を確認することができます。

Answer 2

はあなたが子供に自分の親要素とインラインブロックの上にテーブルのセルを使用し、垂直整列を追加する必要があります。親要素にミドル：

<div class = "test" style = "width: 32px; height: 22px; display: table-cell; border: 1px solid; border-radius: 5px; text-align: center; vertical-align: middle;"> 
    <div style = "display: inline-block;">...</div> 
</div> 

https://jsfiddle.net/Lkfr6ar1/