任意の要素の中央揃えを実現

915 ワード
  • 水平中央はmargin:0 autoが一般的に使用される.しかし、これは垂直中心を実現することはできません.
  • は、位置決めおよびtransformを組み合わせることによって、任意の要素の水平垂直中央を実現する.
    • 


    
    
    <style>
        .out {
            width: 400px;
            height: 400px;
            background-color: firebrick;
            margin: 200px auto;
            position: relative;
        }
        .inner {
            width: 60px;
            height: 60px;
            background-color: goldenrod;
            position: absolute;
            left: 50%;
            top: 50%;
            /*translate                  */
            transform: translate(-50%,-50%);
        }
    </style>


<div class="out">
    <div class="inner"/>
</div>


</code></pre> 
</article>
                            </div>
                        </div>
    上と左の合計
    エンタープライズ・サーバ・プロセスの構築