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
– robabby, Commented Oct 4, 2013 at 14:41
No reason, just wanted to figure out why it isn't working, testing on Google Chrome. — Steven_Harris_
– Steven_Harris_, Commented Oct 4, 2013 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
– Marc Audet, Commented Oct 4, 2013 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
– cimmanon, Commented Oct 4, 2013 at 15:01

Chris Halcrow · Accepted Answer · 2016-02-22 02:16:02Z

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.

I would use list items instead of divs. Set the <li> to display: table, and then child elements will have display: table-cell. Then you can center text and do whatever you would do to a table cell.
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.

pjpscriv · Accepted Answer · 2025-04-09 19:11:21Z

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>

You "forgot" to demonstrate problems when content dimensions exceed parent dimensions.

Collectives™ on Stack Overflow

Center align with table-cell

2 Answers 2

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Linked

Related