将div保持在CSS中的BG图像中心

Question

我遇到的问题是我努力保持我的防暴游戏文字流畅，当我调整浏览器大小时，它似乎陷入困境。无论是左侧还是右侧，通常右侧从S的末端到窗口侧面都有更多的空间。

＆＃13;

＆＃13;

// The showcase is just the container 
// containing the background image. 

    .showcase {
      position: relative;
      width: 100%;
      height: 35.76em;
      text-align: center;
      background: url(https://www.riotgames.com/darkroom/original/d6120739b8bf25995d5c43e69b9ce85d:bf411966145dd8b6b0f224e372aa27e5/annie.jpg);
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
    
// Info Text is The Main Text 
// I'm trying to keep centered and fluid **

    .info-text {
      color:white;
      position: absolute;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-family: "Montserrat", sans-serif;
      font-size: 6.5em;
      font-weight: bold;
      margin: 0;
      top: 15%;
      left: 25%;
    }

// I just ended up adding in the flex-box properties hoping to fix it, 
// but im not too sure if it made things worse or actually helped out.

    @media only screen and (max-width: 768px) {
      .grid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
      }
      
      .info-text {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        height: 25vh;
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-family: "Montserrat", sans-serif;
        font-size: 3.5em;
        font-weight: bold;
        top: 38%;
        left: 10%;
        margin: 0;
      }

＆＃13;

<section class="showcase">
    <div class="welcome-headline">
        <h6>Welcome</h6>
    </div>
    <div class="info-text">
        <p>
            Riot Games
        </p>
    </div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用flexbox为容器上的此属性（在您的情况下为背景图像）：

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

示例：

＆＃13;

＆＃13;

.showcase {
    position: relative;
    width: 100%;
    height: 35.76em;
    text-align: center;
    background: url(https://www.riotgames.com/darkroom/original/d6120739b8bf25995d5c43e69b9ce85d:bf411966145dd8b6b0f224e372aa27e5/annie.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
}


.info-text {
    color: white;
    position: absolute;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: "Montserrat", sans-serif;
    font-size: 6.5em;
    font-weight: bold;
}


@media only screen and (max-width: 768px) {

    .info-text {
        font-size: 3.5em;
    }
}

＆＃13;

<section class="showcase">
    <div class="welcome-headline">
        <h6>Welcome</h6>
    </div>
    <div class="info-text">
        <p>
            Riot Games
        </p>
    </div>
</section>

＆＃13;

＆＃13;

＆＃13;