Html 在css圆中居中一个元素（宽度和高度由ems给出）

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

这是一个

HTML

css

---

更改为

位置：相对

检查

更改

位置：

在

h1

中更改为

相对

。之后，我将明确定义

top

到

60px它将使标题居中


编辑：

您还可以使用百分比值更改CSS中的
top
 如果要对齐的元素是内联块，则可以使用
行高
进行对齐

将CSS代码更新为：

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

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

    background: red;
}  

fiddle->这是正确的，但此解决方案取决于
font size
。如果字体大小是相对的，例如
body{font-size:2em；}
，硬
60px
将不会垂直对齐
。将只适用于
h1
文本的一行（仅用于警告@solom），因此如果您的
h1
仅在一行上，这是一个很好的解决方案。就我而言，是的，这在所有主要浏览器上都是兼容的，不会造成任何有害的bug或小故障。不过，斯文的答案是正确的。：）我总是通过右键点击任何在线网页，使用谷歌浏览器的“Inspect元素”来学习HTML和CSS。
.circle {
    display: block;
    width: 10em;
    height: 10em;
    background: red;
    position: relative;
    border-radius: 50%;
}    
    h1 {
      text-align: center;
      position: absolute;
      top: 50%;

}

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

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

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

    background: red;
}