How to position a table at the center of div horizontally & vertically
HtmlCssLayoutVertical AlignmentCenteringHtml Problem Overview
We can set a image as background image of a <div>
like:
<style>
#test {
background-image: url(./images/grad.gif);
background-repeat: no-repeat;
background-position: center center;
width:80%;
margin-left:10%;
height:200px;
background-color:blue;
}
</style>
<div id="test"></div>
I need to set a table at the center of a <div>
horizontally & vertically. Is there a cross-browser solution using CSS
?
Html Solutions
Solution 1 - Html
Centering is one of the biggest issues in CSS. However, some tricks exist:
To center your table horizontally, you can set left and right margin to auto:
<style>
#test {
width:100%;
height:100%;
}
table {
margin: 0 auto; /* or margin: 0 auto 0 auto */
}
</style>
To center it vertically, the only way is to use javascript:
var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop) # with jQuery
$$('table')[0].setStyle('margin-top', tableMarginTop) # with Mootools
No vertical-align:middle
is possible as a table is a block and not an inline element.
Edit
Here is a website that sums up CSS centering solutions: http://howtocenterincss.com/
Solution 2 - Html
Here's what worked for me:
#div {
display: flex;
justify-content: center;
}
#table {
align-self: center;
}
And this aligned it vertically and horizontally.
Solution 3 - Html
To position horizontally center you can say width: 50%; margin: auto;
. As far as I know, that's cross browser. For vertical alignment you can try vertical-align:middle;
, but it may only work in relation to text. It's worth a try though.
Solution 4 - Html
Just add margin: 0 auto;
to your table
. No need of adding any property to div
<div style="background-color:lightgrey">
<table width="80%" style="margin: 0 auto; border:1px solid;text-align:center">
<tr>
<th>Name </th>
<th>Country</th>
</tr>
<tr>
<td>John</td>
<td>US </td>
</tr>
<tr>
<td>Bob</td>
<td>India </td>
</tr>
</table>
<div>
Note: Added background color to div to visualize the alignment of table to its center
Solution 5 - Html
Additionally, if you want to center both horizontally and vertically -instead of having a flow-design (in such cases, the previous solutions apply)- you could do:
- Declare the main div as
absolute
orrelative
positioning (I call itcontent
). - Declare an inner div, which will actually hold the table (I call it
wrapper
). - Declare the table itself, inside
wrapper
div. - Apply CSS transform to change the "registration point" of the wrapper object to it's center.
- Move the wrapper object to the center of the parent object.
#content {
width: 5em;
height: 5em;
border: 1px solid;
border-color: red;
position: relative;
}
#wrapper {
width: 4em;
height: 4em;
border: 3px solid;
border-color: black;
position: absolute;
left: 50%; top: 50%; /*move the object to the center of the parent object*/
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*these 5 settings change the base (or registration) point of the wrapper object to it's own center - so we align child center with parent center*/
}
table {
width: 100%;
height: 100%;
border: 1px solid;
border-color: yellow;
display: inline-block;
}
<div id="content">
<div id="wrapper">
<table>
</table>
</div>
</div>
Note: You cannot get rid of the wrapper div, since this style does not work directly on tables, so I use a div to wrap it and position it, while the table is flowed inside the div.
Solution 6 - Html
You can center a box both vertically and horizontally, using the following technique :
##The outher container :
- should have
display: table;
##The inner container :
- should have
display: table-cell;
- should have
vertical-align: middle;
- should have
text-align: center;
##The content box :
- should have
display: inline-block;
If you use this technique, just add your table (along with any other content you want to go with it) to the content box.
##Demo :
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
<em>Data :</em>
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Tom</td>
<td>15</td>
</tr>
<tr>
<td>Anne</td>
<td>15</td>
</tr>
<tr>
<td>Gina</td>
<td>34</td>
</tr>
</table>
</div>
</div>
</div>
body {
margin : 0;
}
.outer-container {
position : absolute;
display: table;
width: 100%;
height: 100%;
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
background: #fff;
padding : 20px;
border : 1px solid #000;
}
See also this Fiddle!
Solution 7 - Html
I discovered that I had to include
body { width:100%; }
for "margin: 0 auto" to work for tables.
Solution 8 - Html
As I can't comment yet, I will post my comment to jdlin here. If you want to accomplish this without styling the table itself, you could do:
#div
{
display: flex;
justify-content: center;
align-items: center;
}