将元素置于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示例