Good day! I am interested in the possibility of centering a line element inside a block with an unknown height, which is inside a block with an unknown height. I mean, I reviewed a lot of resources and questions here, all lead to the fact that if the height of the parent unit is set, or at least the parent unit of the parent unit, then everything works. And this is true. And what if I have this CSS code:

#preloader { position:fixed; top:0; left:0; right:0; bottom:0; z-index: 9999; } .loader { position: absolute; }

And this HTML:

 <div id="preloader"> <div class="loader"> <span id="loader_txt">Здесь текст</span> </div> </div>

I deliberately did not leave in the code allusions to lower-case elements, because it is obvious. I ask a little philosophical. If heights are unknown, it remains only to resort to JS? Thank.

    3 answers 3

    You can center content in "obscurity" using flexbox .

    In your case it will be like this:

     #preloader { position: fixed; top:0; left:0; right:0; bottom:0; z-index: 9999; background: rgba(0, 0, 0, .7); display: flex; /* Магия */ align-items: center; /* Центрируем по вертикали */ justify-content: center; /* Центрируем по горизонтали */ }

    Demo: JsFiddle

    Some interesting flexbox resources:

    1. Practical application of FlexBox
    2. caniuse, browser support
    3. A Complete Guide to Flexbox
    • I agree, but display: flex doesn't work in some browsers, right? Thanks anyway for the idea. - Rotten Log
    • I gave a link to caniuse, there is support in all browsers, and in IE since IE 10. If you are not developing web applications for use in the state. sector, you can safely use. - Pavel Azanov
    • :)) Thank you, I will be bold. - Rotten Log

    If you searched the site, you would find a lot of options. For example my https://ru.stackoverflow.com/a/466863/177613

      Option 1

      The solution is without explicitly specifying the dimensions that I use when I need to align the block vertically, but its final height is unknown. It even works in IE9. Example:

       .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>

      Option 2

      The easiest way to align is with Flexbox, but this option does not support IE 9:

       .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>