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

css

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

更改以position:relative检查此

Answer 3

更改position:为. h1_ relative之后，我将明确定义将标题居中的topto 。60px;

JSFiddle

编辑：

您也可以top使用百分比值更改 CSS 中的值。