html - 在 css 圆中居中元素(由 ems 给出的宽度和高度)

Question

你好，我正在尝试将元素置于 css 圆圈的中心。我尝试了几种不同的方法，但没有成功。

这里是JsFiddle example

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

如果要对齐的元素是行内 block ，那么你可以使用 line-height 来实现。

将您的 CSS 代码更新为:

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

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

    background: red;
}  

JsFiddle Example