Css 文本居中，图像居中

我试图在magento上重新设计一个分类页面，以最大高度全宽显示分类图像，并将分类标题显示在图像中心的同一个框中

我已经用下面的代码将类别图像和标题移动到页面包装器中

<move element="category.image" destination="page.wrapper" before="main.content" />
<move element="page.main.title" destination="page.wrapper" before="main.content"/>

但我不知道如何让分类标题位于图片的中心

如有任何建议，将不胜感激

我正在尝试编辑的页面：

---

我试图复制的页面：

如果标题是文本元素，请指定

文本对齐：居中到其父级。如果标题不是文本元素，可以通过指定元素
display:inline block

这是假设您使用的是背景图像（您应该这样做）

这可能是一个更简单的解决方案：

对于更多信息，请查看W3:
< P>你可以将该图像设置为div的背景图像，然后简单地在中间显示文本。

index.html：

<div class="container">
   <p>TEXT HERE</p>
</div>

像这样：

新答案：
在我的html中，我在img周围放了一个div，这样我就可以给它一个
overflow:hidden。我给了“img”和它周围的容器
高度：100%
。带
溢出：隐藏图像保留在容器中。现在我有了一个图像，与我的容器大小完全相同\

现在是“p”的缩写。我花了一些时间才想出这个主意：

我首先给出了我的‘p’
身高：100%
因此它与包含img和p标记的div具有相同的高度

现在我使用
transform:translateY（-100%），正在向上移动p标记。现在，p标签和img位于同一位置，占据相同的空间（两者具有相同的高度）。

为了使我的“p”居中，我只使用flex属性

index.html

<div class="container">
    <div class="img-container">
        <img src="./img.jpg" alt="">
    </div>
    <p>text</p>
</div>

在其他用户的帮助下找到了答案，因此将其发布给其他用户使用

通过删除两个基本块category.image和page.main.title并创建自定义块来实现

catalog\u category\u view.xml

在theme\模块中创建PHTML：（注意，如果您有一个从Luma继承的自定义主题，您可以将其放在：Magento\u Catalog\templates\category\view\custom\u category\u title.PHTML

<referenceContainer name="category.view.container">

    <block class="Magento\Catalog\Block\Category\View" name="custom.category.top.view" template="category/view/custom_category_title.phtml"/>

</referenceContainer>
<referenceBlock name="category.image" remove="true"/>
<referenceBlock name="page.main.title" remove="true"/>

希望这能帮助其他想做同样事情的人！
我确实考虑过这一点。我遇到的问题是，每个类别都会有不同的背景图像背景图像肯定是解决这个问题的方法。如果每个类别都有不同的背景图像，那么在创建类别时，您可以使用一些简单的javascript来更改图像是活动的。我发布了一个新的答案。这是一个很好的挑战；不幸的是，DJavascript不是我非常熟悉的东西（或者根本不熟悉）。我不知道从哪里开始在Magento中实现它。我以前也看过你链接的页面，并尝试将其应用于我的情况。但我无法使其工作。我原以为可能是因为这两个元素不在同一个容器中，所以我修复了它，但仍然无法使其工作。检查它：或者你可以我会这样做：那也不太管用。我已经更新了我的问题，包括了我目前针对该特定元素的所有HTML和CSS。我开始认为这可能是因为其他原因。如果你想在你的文件中遵循我的第二个答案，你必须更改文本和图像的位置，或者rwise当您使用
transform:xx
时，图像位于文本顶部。由于堆叠上下文的原因，您不能在那里简单地使用
z-index
。只需更改它们的位置。而且编写更简单，不需要大量css行。
.container {
  background-image: url("./img.jpg");
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container p {
  color: rgb(65, 150, 107);
  font-size: 32px;
}

<div class="container">
    <div class="img-container">
        <img src="./img.jpg" alt="">
    </div>
    <p>text</p>
</div>

.container {
  width: 400px;
  height: 300px;
}

.container img {
  width: 100%;
}

.img-container {
  overflow: hidden;
  height: 100%;
}

.container p {
  height: 100%;
  transform: translateY(-100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

<referenceContainer name="category.view.container">

    <block class="Magento\Catalog\Block\Category\View" name="custom.category.top.view" template="category/view/custom_category_title.phtml"/>

</referenceContainer>
<referenceBlock name="category.image" remove="true"/>
<referenceBlock name="page.main.title" remove="true"/>

<?php

/**
 * Category view template
 *
 * @var $block \Magento\Catalog\Block\Category\View
 */
    $_currentCat = $block->getCurrentCategory();
    $categoryTitle = $_currentCat->getName();
    $categoryImage = $_currentCat->getImageUrl();

?>

<div>
   <div class="category-image-custom">
       <img title="<?=$categoryTitle?>" alt="<?=$categoryTitle?>" src="<?=$categoryImage?>">
       <h1><?=$categoryTitle?></h1>
   </div>
</div>

.category-image-custom img {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: top;
    margin: auto;
    height: 300px;
}

.category-image-custom h1 {
    position: absolute;
    bottom: 50%;
    right: 40%;
    font-size: 30px;
    font: 400 50px/1.2 Poiret One, Helvetica Neue, Verdana, Arial, sans-serif;
    color: #fff;
}

.category-image-custom {
    margin-bottom: 20px;
    width: 100%;
    align-self: center;
    position: relative;
    flex-wrap: wrap;
    display: flex;
}