レイアウトを中央に配置

1.真ん中に来る

2.準備物：position，transform

1. の間にあるべき要素(以下、centerBoxと略す)について、position:fixedまたはposition:絶対を宣言する.br/>
   
   
2. top:50%、左:50%、中央.
   
   ㄴ問題点:topとleftを使用して位置を設定する場合.centerBoxのtopとleftの交点(例の赤点)が基点となるので、コンテンツボックスの大きさを考慮せずに中央に位置する.
   
   
   
3. 2の問題を解決するために、translate(-50%、-50%)は、自身を基準点に設定した変換によって適用される.
   
   
   

• には、absoluteが親要素のどちらが相対的に宣言されたかによって決まる位置基準があるというヒントもあります.必要な特定の分野で相対性をよく説明します.

3.終わりましたか…?

transformを使用して位置を設定する場合は、ブラウザ間で処理する必要があります.

-webkit-transform: translate(-50%, -50%);
   -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
     -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);

中央位置を設定することで、家庭に平和をもたらすと、20000