左右中央揃えに便利な関数calc
calc関数はCSSで利用できる関数です。CSSのleft、topプロパティやmargin、paddingプロパティと併せて指定することで中央配置に使えます。
IE10以降、Edge、Chrome、FireFox等、主要なブラウザで問題なく利用できます。
~ leftプロパティにcalc関数を利用して左右中央揃えにする ~
leftプロパティを利用するには該当要素をposition:relative、absolute、fixedいずれかに設定する必要があります。
結果
HTML
CSS
-
calcで中央配置
-
/* HTMLの例 */
calcで中央配置 -
/* CSSの例 */ .sample1 { background: pink; height:100px; } .sample1_child { position:relative; background: skyblue; left: calc(50% - 100px / 2); width:100px; height:100px; }
~ marginプロパティにcalc関数を利用して左右中央揃えにする ~
leftプロパティを利用する場合と違い、該当要素のposition値は関係ありません。
結果
HTML
CSS
-
calcで中央配置
-
/* HTMLの例 */
calcで中央配置 -
/* CSSの例 */ .sample2 { background: pink; height:100px; } .sample2_child { background: skyblue; margin:0 0 0 calc(50% - 100px / 2); width:100px; height:100px; }