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

你好，我正试图将一个元素置于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%;

}

最佳答案

如果to-be-aligned元素是内联块，那么可以使用line-height来完成。
将CSS代码更新为：

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

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

    background: red;
}

JsFiddle Example

关于html - 使元素在CSS圆中居中(宽度和高度由ems给出)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16978647/