How to center a DIV table in browser

I used DIV to create a 2 column table.

My div table located at left hand side. How to center this div table ? Thanks

<div id="result" align="center" >
<div id="col1" style="float:left">
A<br />
B<br />
</div>
<div id="col2" style="float:left">
1<br />
2&开发者_C百科lt;br />
</div>
</div>

You can use 2 different methods:
the first one is the display flex,align-items center and justify-content-center combo,you just have to put this style on your first div element

.center-flex{
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

<div id="result" class="center-flex">
    <div id="col1" style="float: left;">
        A<br />
        B<br />
    </div>
    <div id="col2" style="float: left;">
        1<br />
        2<br />
    </div>
</div>

the second one is the "position absolute" method,you can use this style on your first div element

.center-absolute{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

<div id="result" class="center-absolute">
    <div id="col1" style="float: left;">
        A<br />
        B<br />
    </div>
    <div id="col2" style="float: left;">
        1<br />
        2<br />
    </div>
</div>

Hope this can help you!

Style the outer div with the width you want, and do the usual margin: 0 auto thing.

http://jsfiddle.net/pQfWg/

See the style i added to the outer div:

<div id="result" style="margin: 0 auto; text-align:center;width:800px;">
    <div id="col1" style="float:left">
       A<br />
       B<br />
    </div>
    <div id="col2" style="float:left">
       1<br />
       2<br />
    </div>
 </div>

add this in style tag, it will work for you in all browsers:

#result{
        position:absolute;
        top:50%;
        left:50%;
}

Hope this helps.