It is necessary to implement the following through CSS (plus the background image is blacked out when hover):

image

The main question is how to center the text block (not fixed dimensions) in the center on top of another block with a background image?

    2 answers 2

    1. Solution via Flexbox

    .container-fluid { height: 400px; background-color: lightgreen; display: flex; /* Центрируем по вертикали */ align-items: center; /* Центрируем по горизонтали */ justify-content: center; } 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-md-offset-5 text-center "> <div class="play-btn"> <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play"> <p>Some Button</p> </div> </div> </div> </div>

    2. Solution through a pseudo-element with IE 9 support

     .container-fluid { height: 400px; background-color: lightgreen; overflow: hidden; position: relative; text-align: center; } /* Обертка */ .container-fluid:before { content: ''; height: 100%; display: inline-block !important; vertical-align: middle; } /* Блок, который нужно выровнять */ .row { display: inline-block; vertical-align: middle; } 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-md-offset-5 text-center "> <div class="play-btn"> <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play"> <p>Some Button</p> </div> </div> </div> </div>

    3. Solution through absolute positioning

     .container-fluid { height: 400px; background-color: lightgreen; overflow: hidden; position: relative; } .row{ position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); } 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-md-offset-5 text-center "> <div class="play-btn"> <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play"> <p>Some Button</p> </div> </div> </div> </div>

    4. Solution through line-height

     .container-fluid { height: 400px; background-color: lightgreen; overflow: hidden; position: relative; } .row{ line-height: 400px; } 
     <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-md-2 col-md-offset-5 text-center "> <div class="play-btn"> <img src="http://elzol.lamusica.com/images/core/play.png" alt="Play"> <p>Some Button</p> </div> </div> </div> </div>

    • @Qwertiy, and where is the bootstrap? Bootstrap is connected only to minimally stylize an example, unlike your bare text. - Vadizar

     html, body { height: 100%; margin: 0; } body { text-align: center; } body::before { content: ""; height: 100%; } section, body::before { display: inline-block; vertical-align: middle; } 
     <section> <h1>Animals</h1> <p>beautiful animals</p> </section>