section should go to the end of the browser window, and not be limited to its content. After that, its content should be in the middle both horizontally and vertically.

HTML code

 <section> <div style="text-align: center;"> <div> <div class="admin-block"> <img src="img/admin_gallery.png" alt=""> </div> <div class="admin-block"> <a href="?option=edit_users"><img src="img/admin_users.png" alt=""></a> </div> </div> <div> <div class="admin-block"> <img src="img/admin_michail.png" alt=""> </div> <div class="admin-block"> <a href="?option=edit_statii"><img src="img/admin_statii.png" alt=""></a> </div> </div> <div> <div class="admin-block"> <img src="img/admin_weapon.png" alt=""> </div> <div class="admin-block"> <img src="img/admin_revard.png" alt=""> </div> </div> </div>

CSS code

 .admin-block { padding: 15px; display: inline-block; }

Now enter image description here

What should be the result enter image description here

  • Complete online center placement guide. Several possibilities are considered. If this is not necessary to read a lot of beeches, but rather choose your case. css-tricks.com/centering-css-complete-guide - Sergey
  • You have been given three answers. If any fit, then mark it as accepted. If not, leave a comment that you would like to receive. - Vadim Ovchinnikov
  • Pictures are put on the vertical middle, but not on the horizontal - FLWRZ4U

3 answers 3

In order for the section occupy the entire window of the screen, let it be 100vh high.

Next, in order to center and vertically and horizontally set the section property display: flex; and his child margin: auto; .

 body { margin: 0; } section { width: 100vw; height: 100vh; display: flex; } section > div { margin: auto; }

    For parent divok:

      section>div{ min-height: 100vh; display:flex; align-items: center; justify-content: center; } 

       * { padding: 0; margin: 0; box-sizing: border-box; } html, body { height: 100%; } .b { text-align: center; font-size: 0; height: 100%; background: #999; display: table; width: 100%; } .b-inner { display: table-cell; vertical-align: middle; } .b-items { max-width: 300px; margin: 0 auto; } .b-item { display: inline-block; vertical-align: top; width: 48%; height: 100px; margin: 1%; background: #fff; position: relative; font-size: 13px; } .b-item:nth-of-type(odd){ background: #F0FFFF; } .b-item:before { content: 'icon'; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; line-height: 40px; background: tomato; margin: -20px 0 0 -20px; color: #fff; } 
       <div class="b"> <div class="b-inner"> <div class="b-items"> <div class="b-item"></div> <div class="b-item"></div> <div class="b-item"></div> <div class="b-item"></div> <div class="b-item"></div> <div class="b-item"></div> </div> </div> </div>