So you are wondering how to center some kind of an element (for example button or image) inside a jQuery Mobile page? Well, some solutions may surprise you.
I will try to cover two distinct ways of element centering, one will handle only X axis centering while the other one will cover full page centering (X and Y axis).

Note: If this tutorial was helpful, need further clarification, something is not working or do you have a request for another Ionic post? Furthermore, if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here, again leave me a comment below. I'm here to help you, I expect the same from you. Feel free to comment below, subscribe to my blog, mail me to, or follow and mention me on twitter (@gajotres). Thanks and have a nice day!

PS. If you want my help, if possible (even if it takes you some time to do that), create a working example I can play with. Use Plunker for AngularJS based questions or jsFiddle for jQuery/jQuery Mobile based questions.


Example 1

The first example will cover only X axis centering, it is also an easiest one, using simple CSS solution. In this case we don’t need to worry about page height.


<!DOCTYPE html>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="" /> 
        <!--<script src=""></script>-->
        <script src=""></script>    
        <div data-role="page" id="index" data-theme="a" >
            <div data-role="header">
                    First Page
                <a href="#second" class="ui-btn-right">Next</a>
            <div data-role="content">
                <div data-role="button" class="ui-btn ui-input-btn ui-shadow custom-btn">button text</div>
            <div data-role="footer" data-position="fixed">


.custom-btn {
    margin: 0 auto !important;
    width: 30%;
As you can see we only need this CSS declaration:
margin: 0 auto !important;
You can also put it inside an element style attribute, but I would like to advise against it, this way code readability will be much better.
Working Plunker example can be found here:
Embedded example:

Example 2

Last example was easy, now let’s do something more complex. Sometimes we will need to center an element according to the X and Y axis. This example will show you how to do this, disregarding other page content. It will be useful only for full width/height containers, precisely what we have with jQuery Mobile.


This example will use same HTML as the previous one.


.custom-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
As you can see an element is absolutely positioned according to the available screen space. We are also using CSS3 to mathematically calculate perfect middle position. Let’s say our page is 500px wide and high. Top: 50% (same goes for left) will give use 250px (but this is still not a perfect middle point) and we will add another -50px thanks to the transform: translate(-50%, -50%). Finally this will set a button top-left point to the 200px-200px coordinate thus perfectly centering it.
Working Plunker example can be found here:
Embedded example:
Continue Reading

  • Joel

    Thanks I’ve been looking for that solution for days !

  • Neisha

    Thank you!

    Been fighting with my code since yesterday.