Html 在没有固定高度的情况下，将DIV水平和垂直居中_Html_Css

Html 在没有固定高度的情况下，将DIV水平和垂直居中

html css

Html 在没有固定高度的情况下，将DIV水平和垂直居中,html,css,Html,Css,我希望内容垂直和水平居中，但它只能水平居中。问题是我没有固定的身高。谢谢你们的帮助 html，身体{ 高度：100%余量：0；溢出：隐藏； } .内容{ 宽度：100%；身高：100%；对齐项目：居中；证明内容：中心；显示器：flex；弯曲方向：立柱；文本对齐：居中； } 欢迎访问该网站！遵循此代码正文{ 保证金：0；填充：0； } .内容包装器{ 背景色：#121212；显示：块；左：0；身高：100%；填充：15px；位置：固定；排名：0；宽度：1

我希望内容垂直和水平居中，但它只能水平居中。问题是我没有固定的身高。谢谢你们的帮助

html，
身体{
高度：100%余量：0；
溢出：隐藏；
}
.内容{
宽度：100%；
身高：100%；
对齐项目：居中；
证明内容：中心；
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
}


欢迎访问该网站！

遵循此代码

正文{
保证金：0；
填充：0；
}
.内容包装器{
背景色：#121212；
显示：块；
左：0；
身高：100%；
填充：15px；
位置：固定；
排名：0；
宽度：100%；
}
.内容{
背景色：#F5；
显示：表格；
身高：100%；
左边距：自动；
右边距：自动；
文本对齐：居中；
宽度：100%；
}
.百分细胞{
显示：表格单元格；
身高：100%；
垂直对齐：中间对齐；
宽度：100%；
}
h1{
颜色：#121212；
}


欢迎访问该网站！

您可以通过这种方式轻松地将元素相对于父元素居中（假设父元素具有

位置：相对；

）

在您的示例中：

h1 {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

也可以在屏幕中部使用“代码>位置：固定；<代码>取而代之。

以下是您需要的示例：

<section>
    <div class="centerize">
        <div class="v-center">
            <div class="box">Say my name!</div>
        </div>
    </div>
</section>

请遵循此代码

HTML

你的HTMLAR在哪里？你确定在这个线程中找不到答案吗？谢谢，找到了解决方案！

section {
    height: 100vh;
    background: #fff;
}

.centerize {
    display: table;
    height: 100%;
    width: 100%;
 }

.v-center {
     display: table-cell;
     vertical-align: middle
 }

.box {
     background: #000;
     width: 10%;
     margin: 0 auto;
 }

<body >
  <div class="content">
    <h1>Welcome to the website!</h1>
  </div>
</body>

html,body {
   height : 100%;
   width : 100%;
}
.content {
   height : 100%;
   width : 100%;
   display: table;
}
h1 {
   text-align: center;
   display: table-cell;
   vertical-align: middle;
}