Horizontally center a DIV in page

Question

I'm trying to center a div, which is the Microsoft pubCenter AdControl for Windows 8 apps in HTML5/JavaScript.

    <div id="myAd" style="; top: 0%; width: 292px; height: 60px; z-index: 1"
        data-win-control="MicrosoftNSJS.Advertising.AdControl"
        data-win-options="{applicationId: 'exampleAdId', adUnitId: 'exampleAdUnit'}">
    </div>

How would I center a div horizontally so it is always in the middle of a page?

Prelect

may want to look at this question – Grimaud

Answer 1

you can use css only

left:50%;margin-left:-146px;

the point is to set margin left as half of the div width

Athal

Or use margin:0 auto... Much simpler. – Dnieper

Answer 2

Add margin:auto in your style="" tag and that should do the trick.

Other possibility, align=center

Dnieper

Answer 3

you can use simply this class to absolute center

.ab_center
{
    height:300px;
    width:300px;
    background-color:#27f305;
    position:absolute;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

Example fiddle : http://jsfiddle.net/devesh_dc/dzyvmt0o/

Monetary

Answer 4

Found on other site for HTML5, C# and VS2015. Add to css: #wrapper { width: 600px;margin: auto;} and wrap your content with:
<form id="form1"> <div id="wrapper"> Content </div> </form>

Yellowbird

Answer 5

you can use align='center' in <div> tag

Philips

This is not supported by html5 – Contra