Html 如何在不使用绝对位置的情况下使我的h1位于图像背景的中心？

/*概述*/
@导入url（'https://fonts.googleapis.com/css?family=Oxygen');
.包装纸{
最大宽度：630px；
保证金：0自动；
}
/*标题*/
#标题.导航栏.导航栏标题a{
颜色：白色；
字体大小：25px；
字体系列：“氧气”，无衬线；
}
#标题。导航条反转{
背景色：#2C3E50；
边框颜色：#2C3E50；
}
#标题.导航栏{
边界半径：0；
}
#标题.导航栏导航>li>a{
颜色：白色；
}
#标题.导航栏{
页边距底部：0；
}
.nav.navbar-nav.navbar-right li a{
颜色：白色；
}
/*内容*/
#内容。内容。响应图像{
宽度：100%；
背景大小：100%100%；
z指数：0；
}
#内容。内容h1{
字体系列：“开放式Sans”，无衬线；
颜色：#2c3e50；
字体大小：50px；
字体大小：粗体；
z指数：2；
文本对齐：居中；
}
/*页脚*/
/*反应性*/
/*桌面*/
@媒体屏幕和屏幕（最小宽度：992px）
{
#内容。内容。响应图像{
背景图像：url（'https://wallpaperscraft.com/image/board_black_line_texture_background_wood_55220_1920x1080.jpg');
}
}
/*平板电脑*/
@媒体屏幕和（最小宽度：768px）和（最大宽度：991px）
{
#内容。内容。响应图像{
背景图像：url（'https://wallpaperscraft.com/image/board_black_line_texture_background_wood_55220_1920x1080.jpg');
}
}
/*流动的*/
@媒体屏幕和屏幕（最大宽度：767px）
{
#内容。内容。响应图像{
背景图像：url（'https://wallpaperscraft.com/image/board_black_line_texture_background_wood_55220_1920x1080.jpg');
}
}
/*习俗*/
@媒体屏幕和屏幕（最大宽度：574px）
{
#内容。内容。响应图像{
背景图像：url（'https://wallpaperscraft.com/image/board_black_line_texture_background_wood_55220_1920x1080.jpg高度:250px ;；
}
}

魔门






欢迎来到魔法门

正如你所问，我在这里添加了

位置：相对；顶部：-250px至
h1
。但这是一个丑陋的做法，也是一个非常糟糕的代码<代码>位置：绝对和
转换：transle（）
更好


/*概述*/
@导入url（'https://fonts.googleapis.com/css?family=Oxygen');
.包装纸{
最大宽度：630px；
保证金：0自动；
}
/*标题*/
#header.navbar.navbar header a{颜色：白色；字体大小：25px；字体系列：'Oxygen'，无衬线；}
#header.navbar反转{背景颜色：#2C3E50；边框颜色：#2C3E50；}
#header.navbar{边界半径：0；}
#header.navbar nav>li>a{color:white；}
#header.navbar{margin bottom:0；}
.nav.navbar-nav.navbar-right li a{颜色：白色；}
/*内容*/
#content.content.responsive图像{宽度：100%；背景大小：100%100%；z索引：0；}
#content.content h1{字体系列：'Open Sans'，Sans serif；颜色：#2c3e50；字体大小：50px；字体大小：粗体；z索引：2；文本对齐：中心；位置：相对；顶部：-250px；}
/*页脚*/
/*反应性*/
/*桌面*/
@媒体屏幕和屏幕（最小宽度：992px）
{
#content.content.responsive图像{背景图像：url（'https://wallpaperscraft.com/image/board_black_line_texture_background_wood_55220_1920x1080.jpg');}
}
/*平板电脑*/
@媒体屏幕和（最小宽度：768px）和（最大宽度：991px）
{
#content.content.responsive图像{背景图像：url（'https://wallpaperscraft.com/image/board_black_line_texture_background_wood_55220_1920x1080.jpg');}
}
/*流动的*/
@媒体屏幕和屏幕（最大宽度：767px）
{
#content.content.responsive图像{背景图像：url（'https://wallpaperscraft.com/image/board_black_line_texture_background_wood_55220_1920x1080.jpg');}
}
/*习俗*/
@媒体屏幕和屏幕（最大宽度：574px）
{
#content.content.responsive图像{背景图像：url（'https://wallpaperscraft.com/image/board_black_line_texture_background_wood_55220_1920x1080.jpg'）；高度：250px；}
}

魔门




欢迎来到魔法门
您可以在css中使用
display:flex
，我只是发布了一个示例来说明如何获得它

使用下面的css部分

.content-content {
  position:relative;
}

.wrapper {
    max-width: 630px;
    margin: 0 auto;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}

您不想将图像设置为背景图像的原因是什么？据我所知，
img
元素用于作为内容一部分的图像，而
background img
属性用于您正试图做的事情。只需在csswow中使用
display:flex
，谢谢，先生，但我希望h1仅水平居中，它的位置靠近导航栏的底部：oi忘了提到，但我会记下你的答案它是abig帮助我在div中有一个图像，这就是为什么我的设计是这样的：图像在左侧，而文本框在右侧谢谢先生！！它帮助我出于某种原因删除了display flex。
display:flex
将
h1
标记保留在整个图像的中心。