More than 1 year has passed since last update.

HTML+CSS 天地センターの仕方

Last updated at 2023-07-06Posted at 2023-07-06

背景に円＋SVG書き出ししたアイコンを天地センター寄せ

index.html

<div id="container">
        <h1><div class="login-circle"><svg>hogehoge</svg></div></h1> 
</div>

style.scss

.login-circle{
    top:50%;
    margin:0 auto;
    background: $cl-dkbl;
    width:127px;
    line-height: 127px;
    border-radius: 64px;
}

今回の天地センターは、line-height: 127px;で、line-heightを使った。

天地センターのやり方はいろいろあるので、別途、折を見てまとめるようにする。