What Is The Least Horrible Way to Center an Element with CSS

What is the least horrible way to center an element with CSS?

Since this question was tagged CSS3, here's a "least horrible" solution using CSS3's "flexbox". Unfortunately only recent versions of Safari, Chrome and Firefox support it.

html, body {
  margin:0;
  padding:0;
  height:100%;
  background:#eee;
}
header {
  width:30em;
  background:#fff;
}
body {  
  display:box;
  box-pack:center;
  box-align:center;
  box-orient:horizontal;
}

A more complete demo can be found here.

How can I horizontally center an element?

You can apply this CSS to the inner <div>:

#inner {
  width: 50%;
  margin: 0 auto;
}

Of course, you don't have to set the width to 50%. Any width less than the containing <div> will work. The margin: 0 auto is what does the actual centering.

If you are targeting Internet Explorer 8 (and later), it might be better to have this instead:

#inner {
  display: table;
  margin: 0 auto;
}

It will make the inner element center horizontally and it works without setting a specific width.

Working example here:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

css: how to build centered div with minimum spacing on the left

I take it back... it's marginally possible... with a lot of hackish coding...

http://jsfiddle.net/7myd4/2/

http://jsfiddle.net/7myd4/2/show

There you will find the code and the demo. It involves a wrapper, padding, relative positioning, and a really hackish layout. :P

---

EDIT:

looking back at this answer from over two years ago... I've come to the conclusion that this answer is terrible.

I've updated it with code samples and a new demo (only thing different is formatting changes and moving inline styles to classes)

---

HTML

<div class="firstdiv"></div>
<div class="seconddiv">
    <div class="innerdiv"></div>
</div>

CSS

body{
  padding:10px 0px;
}

.firstdiv {
    background-color:#ddd;
    position:fixed;
    left:0px;
    width:200px;
    height:200px;
}

.seconddiv {
    margin:0 auto;
    width:300px;
    height:150px;
    padding-left:400px;
    position:relative;
    left:-200px;
}

.innerdiv {
    background-color:#ccc;
    width:300px;
    height:150px;
}

---

Demo: http://jsfiddle.net/7myd4/55/show

Source: http://jsfiddle.net/7myd4/55/

How can I center ul li into a div?

Since ul and li elements are display: block by default — give them auto margins and a width that is smaller than their container.

ul {
    width: 70%;
    margin: auto;
}

If you've changed their display property, or done something that overrides normal alignment rules (such as floating them) then this won't work.

Vertical centering unknown height

The reason you can't use the pseudo element technique is because you don't have enough ancestor elements that are 100% of the height of the #you-and-us element.

You can simplify the whole thing if you throw out floats and use display: table-cell for your .c-3 elements.

http://jsfiddle.net/6J2WA/5/

/* This parent can be any width and height */
.block {
    text-align: center;
}

.inner {
    max-width: 960px;
    margin: 0 auto;
    overflow: hidden;
    background: #ef4;
}

.c-3 {  
    display: table-cell;
    background: #e4f;
}

#you-and-us .c-3 { width: 33.5%; }
#you-and-us .c-3:first-child { text-align: right; }
#you-and-us .c-3:nth-child(2) { width: 21%; text-align: center; position: relative; background: yellow; vertical-align: middle; }

---

Related Topics