Center align with table-cell

Question

I'm trying to use the table-cell way to center a div vertically and horizontally.

It works when I use the following code:

div {
  display: table;
}
.logo {
  display: table-cell;
  position: absolute;
  vertical-align: middle;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
}

But I'd rather wrap .logo in another div called .center like here JSFiddle, but for some reason, although it works in JSFiddle, it isn't working for me on my site.

Are you constrained to using the table-cell method? Is there a reason why? — robabby, Oct 04 '13 at 14:41
No reason, just wanted to figure out why it isn't working, testing on Google Chrome. — Steven_Harris_, Oct 04 '13 at 14:42
You are trying to center `.logo` vertically & horizontally in the parent `div`. What controls the width and height of `div`, are these specified? — Marc Audet, Oct 04 '13 at 14:49
The parent element isn't relatively positioned, so .logo is being positioned relative to the next closest ancestor (if no ancestors are relatively positioned, then it is positioned relative to the document). Don't mix vertical centering techniques, pick one or the other. — cimmanon, Oct 04 '13 at 15:01
Possible duplicate of [How to align text vertically center in div with CSS?](http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css) — Cole Johnson, Apr 26 '16 at 17:53

score 53 · Accepted Answer · edited Feb 22 '16 at 02:16

Here is a good starting point.

HTML:

<div class="containing-table">
    <div class="centre-align">
        <div class="content"></div>
    </div>
</div>

CSS:

.containing-table {
    display: table;
    width: 100%;
    height: 400px; /* for demo only */
    border: 1px dotted blue;
}
.centre-align {
    padding: 10px;
    border: 1px dashed gray;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.content {
    width: 50px;
    height: 50px;
    background-color: red;
    display: inline-block;
    vertical-align: top; /* Removes the extra white space below the baseline */
}

See demo at: http://jsfiddle.net/audetwebdesign/jSVyY/

.containing-table establishes the width and height context for .centre-align (the table-cell).

You can apply text-align and vertical-align to alter .centre-align as needed.

Note that .content needs to use display: inline-block if it is to be centered horizontally using the text-align property.

Awesome. I was having this issue in Samsung (Android) browser. Chrome(PC) was applying `vertical-align:bottom` on table-cell but Samsung browser wasn't.. your solution did the trick. — sohaiby, Sep 25 '16 at 07:44

Louie Almeda · Answer 2 · 2017-11-29T01:17:24.323

27

This would be easier to do with flexbox. Using flexbox will let you not to specify the height of your content and can adjust automatically on the height it contains.

DEMO

here's the gist of the demo

.container{

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

}

html

<div class="container">
  <div class='content'> //you can size this anyway you want
    put anything you want here,
  </div>
</div>

edited Nov 29 '17 at 01:17

answered Feb 22 '16 at 02:58

Louie Almeda

4,576
24
32

1

You "forgot" to demonstrate problems when content dimensions exceed parent dimensions. – Janis Mar 29 '19 at 15:55
2

The OP is looking for an answer with display: 'table-cell'. – Ian S Jul 08 '19 at 12:29

Center align with table-cell

2 Answers2