How to Position a Table at The Center of Div Horizontally & Vertically

How to position a table at the center of div horizontally & vertically

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/

How to horizontally center table inside div?

You are setting margin: auto on the div, so the div will be centred … however you have also left the div as width: auto so it will be as wide its container (once you account for margins, padding and borders).

You are setting text-align: center on the div, so the inline children of the div will be centred, but the table is not inline, so it isn't affected (some of the table cells contents might be, depending on inheritance).

If you want to centre the table then you have to centre the table itself.

table { margin: auto; }

Center a DIV horizontally and vertically

After trying a lot of things I find a way that works. I share it here if it is useful to anyone. You can see it here working: http://jsbin.com/iquviq/30/edit

.content {
        width: 200px;
        height: 600px;
        background-color: blue;
        position: absolute; /*Can also be `fixed`*/
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        /*Solves a problem in which the content is being cut when the div is smaller than its' wrapper:*/
        max-width: 100%;
        max-height: 100%;
        overflow: auto;
}

How to center an element horizontally and vertically

• Approach 1 - transform translateX/translateY:

Example Here / Full Screen Example

In supported browsers (most of them), you can use top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically vertically/horizontally center the element.

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

<div class="container">
    <span>I'm vertically/horizontally centered!</span>
</div>

How to center a div horizontally in a table using CSS

try below code..

do it in every tag
And add below code in your css

<td>
   <div class="socicon">
       <div class="social_icon">
            <i class="fa fa-google-plus" aria-hidden="true"></i>
        </div>
    </div>
</td> 
.socicon {
    margin: 0 auto;
    text-align: center;
    width: 57%; // you have to adjust width as your requirement 
}

What is the best way to vertically and horizontally center an HTML element within the viewport?

The best solution (in my opinion) is to use absolute positioning to place the top left of the element at 50%/50%, then shoving the element back into the centre using negative margins. The only drawback is that you have to specify a width and height of the element. Here's an example:

HTML:

​<div id="centerme">
    Hello, world!
</div>​

CSS:

​#centerme
{
    position: absolute;
    left: 50%;
    top: 50%;

    /* You must set a size manually */
    width: 100px;
    height: 50px;

    /* Set negative margins equal to half the size */
    margin-left​: -50px;
    margin-top: -25px;

    background-color: cornflowerblue;
}

Here's a demonstration on jsfiddle: http://jsfiddle.net/UGm2V/

---

If you really require the centred content to have a dynamic height, there's a more advanced solution. Be ware that it won't work in older IE browsers. The HTML goes as follows:

<div id="outter-container">
    <div id="inner-container">
        <div id="centred">
            <p>I have a dynamic height!</p>
            <p>Sup!</p>
        </div>        
    </div>
</div>

The outter container is required to cover the width and height of the page. It's a block element with absolute positioning.

The inner container is actually a table! That's decided by the display: table css property. The win here is that you don't actually need any table HTML.

The #centred div is the last required element. It still covers 100% of the page's width and height, but anything placed inside it will be centred both vertically and horizontally. This is the css you need, with explanations:

/*
An outter container is needed because the table
won't cover the page width and height on it's own
*/
#outter-container
{
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
}

/*
The inner container is a table which is set to
cover the width and height of the page.
*/
#inner-container
{
    display: table;
    width: 100%;
    height: 100%;
}

/*
This table cell will cover 100% of the page width
and height, but everything placed inside it will
be placed in the absolute centre.
*/
#centred
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

​And of course, here's a jsfiddle demonstration to go with it: http://jsfiddle.net/N7ZAr/3/

Center a table within a div

In your initial try, your table won't be centered since you're trying to center something that is taking 100% of the possible space. Technically, it is centered, you just can't see it's taking the entire space.

So imagine if you have a container of 100px. There's a block inside of this container that you want to center. But you're setting this block to have 100px in width. There's just no gap to see!

So this won't work:

{ 
   width: 100%;
   margin: 0 auto;
}

Instead, you should give the centering element a fixed width:

width: 400px; /* or whatever is needed */
margin: 0 auto;

That way it has some space around it.

Here, check this out:
https://jsfiddle.net/9gwcjvp3/

How to center a table of the screen (vertically and horizontally)

This fixes the box dead center on the screen:

HTML

<table class="box" border="1px">
    <tr>
        <td>
            my content
        </td>
    </tr>
</table>

CSS

.box {
    width:300px;
    height:300px;
    background-color:#d9d9d9;
    position:fixed;
    margin-left:-150px; /* half of width */
    margin-top:-150px;  /* half of height */
    top:50%;
    left:50%;
}

View Results

http://jsfiddle.net/bukov/wJ7dY/168/

---

Related Topics