How to center a DIV vertically on a jquery mobile page

Question

I want to center the practiceType div inside the practice div block. It is a jquery mobile page. Here is my code.

<body>
        <div data-role="page" id="practice" >
<!-- /header -->
    <div data-role="header" id="appheader">
        <h2 style="text-align:center;">XXX - Practice Test</h2>
    </div>
<!-- /content -->
    <div role="main" class="ui-content" id="practiceType" style="margin-top:25%;margin-bottom:25%;">
           <div data-role="main" class="ui-content" >
        <a href="#" class="ui-btn ui-corner-all">MATH PRACTICE TEST </a>
        <a href="#" class="ui-btn ui-corner-all">ELA PRATICE TEST</a>
            </div>
    </div>
<!-- /footer -->
    <div data-role="footer" data-position="fixed" data-tap-toggle="false"  id="appfooter" >
        <h6>Comprehensive Learning Resources</h6>
    </div>
</div><!-- /page -->
    </body>
</html>

Possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — gre_gor, Oct 07 '16 at 16:04

score 0 · Answer 1 · answered Oct 07 '16 at 16:17

how to vertically center an element

.element {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
}

then, set the parent div to

position: relative;

so your new code will be:

#practiceType {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
}

#practice {
    position: relative;
}

score 0 · Answer 2 · answered Oct 07 '16 at 16:36

You can use flexbox to achieve that.

.container {
  width: 500px;
  height: 200px;
  background: blue;
  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  width: 50px;
  height: 50px;
  background: red;
}

<div class="container">
  <div class="child"></div>
</div>

score 0 · Answer 3 · answered Oct 07 '16 at 16:41

Below css will help you center the div.

#outer{
 background-color: #000;
 float: left;
 height: 200px;
 width: 100%;
 }
#centerDiv{
 background-color: #fff;
 height: 150px;
 margin: auto;
 width: 70%;
}

check this demo

Try below code for center the text

#outerDiv{
 float: left;
 width: 100%;
 }
#outerDiv h2{
 text-align:center;
 }

How to center a DIV vertically on a jquery mobile page

3 Answers3