JQuery mobile: Vertically and horizontally center multiple images using grid

Question

I'm building an app using jquery mobile. I want to vertically and horizontally center multiple images using grid, i want the images to be exactly in the center of the page. I'v tried everything but nothing really worked.

I want it exactly to look like whats in this pic: Sample

and here is my code:

<div data-role="content"> 
    <div class="ui-grid-a">
        <div class="ui-block-a">
            <img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
        </div>
        <div class="ui-block-b">
            <img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
        </div>
        <div class="ui-block-a">
            <img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
        </div>
        <div class="ui-block-b">
            <img alt="" src="http://i.imgur.com/MIK25Fd.png" style="width: 100%;">
        </div>
    </div>
</div>

I would love if it can look exactly like the image attached.

Thank you.

Answer 1

You can try with flexbox properties.

.ui-block-a,.ui-block-b{
      width: 30px;
      height: 30px;
      margin: 5px;
    }

    .ui-grid-a{
        display: flex;
        align-items: center;
        min-height: 15em;
        justify-content: center;
    }

For further information about flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

You can scale the content div to take the device height:

$(document).on( "pagecontainershow", function(){
    ScaleContentToDevice();

    $(window).on("resize orientationchange", function(){
        ScaleContentToDevice();
    })
});

function ScaleContentToDevice(){
    scroll(0, 0);
    var content = $.mobile.getScreenHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
    $(".ui-content").height(content);
}

Then use some CSS on the grid to center everything within the scaled content:

<div id="GridWrapper">
  <div class="ui-grid-a centeredGrid">
    <div class="ui-block-a" >
        <img alt="" src="http://i.imgur.com/MIK25Fd.png" >
    </div>
    <div class="ui-block-b">
        <img alt="" src="http://i.imgur.com/MIK25Fd.png" >
    </div>
    <div class="ui-block-a" >
        <img alt="" src="http://i.imgur.com/MIK25Fd.png" >
    </div>
    <div class="ui-block-b">
        <img alt="" src="http://i.imgur.com/MIK25Fd.png" >
    </div>
  </div>
</div>

#GridWrapper{
  position: relative;
  height: 100%;
}
#GridWrapper .centeredGrid{
  position: absolute;
  width: 380px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

DEMO