How to align DIV vertically and horizontally

Question

I have a code that works well but somehow does not exactly align the items vertically in the middle. I have tried with vertical-align: middle code but still not working well. How can I resolve this?

I want to align the divs horizontally in the middle, as well as vertically in the middle. When doing the inspect element, some options including ipad, iphone X and nexus 10 also do not show well with the items floating towards the left upper region. Kind regards.

Here is the code:

{{extend 'layout.html'}}

<style type="text/css">html{}.footer{visibility: hidden;}html{::-webkit-scrollbar{display:none;}} </style>
<style type="text/css">
    #container {
      margin: auto;
      width: 1190px;
      padding-top: 40px;
      padding-bottom: 40px;
      text-align: center;
    }

    .box {
      display: block;
      margin: 60px;
      white-space: nowrap;
    }
    .box div {
      display: inline-block;
      margin: 0px;
      padding: 0px;
      width: 33.33%;
      vertical-align:middle;
    }
    .box p {
      position: relative;
      width: 33.33%;
      top: 12px;
      z-index: 2;
      text-align: center;
      font-size: 1.5em;
      left: 15px;
    }
    .clear {
      clear: both;
    }
    .wrapper {
      margin: 0 auto;
      padding: 0 10px;
      width: 1190px;
    }
    .h3{
        font-family: 'Audiowide'
    }


    @media only screen and (max-width: 871px),
            (min-device-width: 320x) and (max-device-width: 1424px){
                #container {
                    margin: auto;
                    width: 87.7%;
                    padding-top: 40px;
                    padding-bottom: 40px;
                    text-align: center;                    
                    }

                .box {
                    display:block;
                    margin: auto;
                    white-space: nowrap;  
                    width: auto;             
                    }
                .box div {
                  display: inline-block;
                  margin: 0px;
                  padding: 0px;
                }
                .box p {
                    position: relative;
                    width: 87.7%;
                    top: 12px;
                    z-index: 2;
                    text-align: center;
                    font-size: 1em;
                    left: 15px;
                    }
                .clear {
                  clear: both;
                }
                .wrapper {
                  margin: 0 auto;
                  padding: 0 10px;
                  width: 100%;
                }


</style>


<body>
    <div id="container">
      <div class="wrapper">
        <h3 >Navigate from here...</h3>
      </div>

      <div class="box">
        <div>
            {{=A('Policy', _class='btn btn-large btn-info',_style="font-family: 'Audiowide';font-size: 14px; border-width: 5px;border-style: solid; background:white; color: #38D9D6; padding:7px 7px; width: 80px; height: 80px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50%; text-align: center; text-decoration:none; vertical-align: middle; display: table-cell;", _href=URL('default','privacy'))}}
            <p>Policy Terms</p>
        </div>
        <div>
            {{=A('Policy', _class='btn btn-large btn-info',_style="font-family: 'Audiowide';font-size: 14px; border-width: 5px;border-style: solid; background:white; color: #38D9D6; padding:7px 7px; width: 80px; height: 80px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50%; text-align: center; text-decoration:none; vertical-align: middle; display: table-cell;", _href=URL('default','privacy'))}}
            <p>Policy Terms</p>
        </div>
        <div>
            {{=A('Policy', _class='btn btn-large btn-info',_style="font-family: 'Audiowide';font-size: 14px; border-width: 5px;border-style: solid; background:white; color: #38D9D6; padding:7px 7px; width: 80px; height: 80px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50%; text-align: center; text-decoration:none; vertical-align: middle; display: table-cell;", _href=URL('default','privacy'))}}
            <p>Policy Terms</p>          
        </div>
      </div>
      <div class="box">
        <div>
            {{=A('Services', _class='btn btn-large btn-info',_style="font-family: 'Audiowide';font-size: 14px; border-width: 5px;border-style: solid; background:white; color: #38D9D6; padding:7px 7px; width: 80px; height: 80px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50%; text-align: center; text-decoration:none; vertical-align: middle; display: table-cell;", _href=URL('dext','predexty'))}}
            <p>Track Services</p>
        </div>
        <div>
            {{=A('Services', _class='btn btn-large btn-info',_style="font-family: 'Audiowide';font-size: 14px; border-width: 5px;border-style: solid; background:white; color: #38D9D6; padding:7px 7px; width: 80px; height: 80px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50%; text-align: center; text-decoration:none; vertical-align: middle; display: table-cell;", _href=URL('dext','predexty'))}}
            <p>Track Services</p>
        </div>
        <div>
            {{=A('Services', _class='btn btn-large btn-info',_style="font-family: 'Audiowide';font-size: 14px; border-width: 5px;border-style: solid; background:white; color: #38D9D6; padding:7px 7px; width: 80px; height: 80px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50%; text-align: center; text-decoration:none; vertical-align: middle; display: table-cell;", _href=URL('dext','predexty'))}}
            <p>Track Services</p>          
        </div>
      </div>

      <div class="clear"></div>
    </div>

</body>

score 0 · Answer 1 · answered Aug 14 '19 at 08:57

   <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>h1 {
    width: 100px;
    height: 100px;
    background-color: red;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}</style>
</head>
<body>

<h1>This is a Heading</h1>


</body>
</html>


Try this CSS this will help

score 0 · Answer 2 · answered Aug 14 '19 at 08:57

0

.vertical-horizontal-centered{
    display: flex;
    align-items: center;
    justify-content: center;
}

Try this. All its children will centered vertically and horizontally.

answered Aug 14 '19 at 08:57

Lukas Baum

12
5

How to align DIV vertically and horizontally

2 Answers2