html - css サークル内の要素の中央揃え (幅と高さは ems で指定)

Question

こんにちは、要素を css 円の中央に配置しようとしています。私はいくつかの異なる方法を試しましたが、うまくいきませんでした。

ここにJsFiddle の例があります

HTML

<div class="large-columns">
        <div class="circle-holder">
                <span class="circle"><h1>h tag</h1></span>
        </div>                  
</div>

CSS

.circle {
    display: block;
    width: 10em;
    height: 10em;
    background: red;
    position: relative;
    border-radius: 50%;
}    
    h1 {
      text-align: center;
      position: absolute;
      top: 50%;

}

Answer 1

配置する要素がインライン ブロックの場合は、 で実行できますline-height。

CSS コードを次のように更新します。

.circle {
    display: block;
    width: 10em;
    height: 10em;
    border-radius: 50%;

    line-height: 10em;
    text-align: center;

    background: red;
}  

JsFiddle の例

Answer 2

に変更position:しh1ますrelative。その後、ヘッダーを中央に配置するtoptoを明示的に定義します。60px;

JSFiddle

編集：

topCSS でパーセント値を変更することもできます。

Answer 3

CSS

    h1 {
      text-align: center;
      position: relative;
      top: 50%;
}

position:relativeこれを確認するように変更