Using CSS to align control inside a div

I want to center-align a GridView control in a <div>. But the GV seems to stay on top-left position of the div even after applying the methods below:

text-align : center and vertical-align : middle yields no results.

Neither does position : relative or margin : auto.

<div align="center"> works for horizontal alignment, but can't find any form of valign for a <div>.

Layout so far:

<div id="content1" class="contentSingleCenter" >
    <asp:GridView ID="grdGrid" runat="server"></asp:GridView>
</div>

CSS:

div.contentSingleCenter
{
    width : 80%;
    height : 200px;
    position: relative; 
    mar开发者_如何学JAVAgin: auto;
}

My main requirement is that I can't use a table to do this.

Any ideas? TIA.

You can use RowStyle-VerticalAlign="Center" and RowStyle-HorizontalAlign="Center"...

Try line-height: $height_of_box combined with text-align: center, see http://jsfiddle.net/ugRd3/.

Hope it helps.

using the attribute line-height might work for you, set it to the same as the height of the div

div.contentSingleCenter
{
    width : 80%;
    height : 200px;
    line-height: 200px; 
    margin: auto;
    text-align:center;
}

Try this:

div.contentSingleCenter
{
    width : 80%;
    height : 200px;
    position: relative;
    display: table-cell;
    vertical-align: middle; 
    margin: auto;
}

Tested in modern browsers and working pretty well. You can use margin-left: auto; margin-right: auto; on the gridview for horizontal centering.

Actually, I've found a fix... <align="center"> and a bit of padding seems to work : )

According to IE9, gridviews and formviews are translated into tables with rows, cols, etc... Therefore, in order to get them centered use :

table
{
margin-left: auto;
margin-right: auto;
}

I know this is an old thread, but here is what I found worked for me:

The asp:GridView control renders as a table nested inside a div. Because of this, applying the style directly to the control does not produce the desired result. I found that applying the style to the table child of the div container worked best in my application. This is really just a permutation of JGM's answer above.

CSS:

.contentSingleCenter table
{
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

I believe this method would be preferred to the accepted answer because it uses CSS instead of the deprecated align attribute.