Html 我的部队在边界半径外

我的问题是：

我有一个

内部

但是当我在

中设置

边界半径时，
从
div
中出来，这是我的代码：

<div class="test"><h1 class="text">test</h1></div>

.test{
    background: red;
    height: 300px;
    width: 300px;
    border-radius: 150px;
    display: inline-block;
    position: relative;
}
.test .text{
    display: inline-block;
    background: green;
    margin: auto;
    position: relative;
}

测试
.测试{
背景：红色；
高度：300px；
宽度：300px；
边界半径：150px；
显示：内联块；
位置：相对位置；
}
.test.text{
显示：内联块；
背景：绿色；
保证金：自动；
位置：相对位置；
}

这是现场直播

设置内部div的边距。如下所示：

margin-top:50px;
margin-left:50px;

您的文本实际上不在div之外：


视觉性刚刚改变，而不是结构

您可能希望将文本定位到中心：

.test{
    background: red;
    height: 300px;
    width: 300px;
    border-radius: 150px;
    display: inline-block;
    position: relative;

    text-align: center;
}

.test .text{
    display: inline-block;
    background: green;
    margin: auto;
    position: relative;

    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

居中技巧：
将文本居中的一种更简洁的方法（如果这是您想要的）：

（以@nkmol为基数）。
请告诉我们您期望的结果是什么…
边距：auto
仅适用于高度/宽度不同于auto的元素。非常感谢它适用于此，非常感谢：D@user3164971认真地你接受了这个？删除我的答案，你问了别的问题，你想要别的东西和解释。
.test{
    background: red;
    height: 300px;
    width: 300px;
    border-radius: 150px;
    display: inline-block;
    position: relative;

    text-align: center;
}

.test .text{
    display: inline-block;
    background: green;
    margin: auto;
    position: relative;

    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.test .text
{
    margin: 0; /* Only need this because h1 elements have default margin. */
    text-align: center;
    line-height: 300px;
}