Consider this code below:
<!doctype html>
<html>
<body>
<div style="background-color: yellow; width: 100vw; height: 100vh; text-align: center;">
<button style="display: block; margin-left: auto; margin-right: auto;">This is a button</button>
</div>
</body>
</html>
I tried to run it in Chrome and Mozilla, it produces the output below:
However, when I tried to run it in android browser, the button is in the LEFT side, seems like margin-left and margin-right doesnt work on the android browser. Any idea why?
You need to refresh your browser a few times, it must've cached the css. It looks the way you expect on android 4.4.
To Clear cache on chrome for android:
Touch Chrome menu > Settings.
Touch (Advanced) Privacy.
Touch Clear browsing data.
If it still does not work with my demo then let me know what version and browser you're using on android.
UPDATE: (for those wondering) This was solved by adding a width to the element that is being centered. In order for margin:auto; to work on some old browsers, in this case we added width:auto;
Demo to test http://jsfiddle.net/Lw543yys/. <>