CSS

centering div horizontally

/*<div class="content">This works with any content</div>*/
.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

css horizontal center

#inner {  
	margin: auto 0;
}

#outer {
  width:100%;
  display: flex;
  justify-content: center;
}


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

center div horizontally

/* margin auto does the magic, make sure to provide width less than 100% */
.center {
	margin: auto;
    width: 400px;
}

.center {
	margin: auto;
    width: 50%;
}

how to center horizontally in css

.content {
	 position: absolute;
     text-align: center;
     top: 50%;
}

how to horizontally center in css

.<your-outer-div> {
  display: flex;
  justify-content: center;
  ('align-items: center' will allow you to vertically center too ;))
}

center div horizontally

.inner{
margin: 0 auto;
}

How to 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>

how to horizontal center a div in css

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

center element horizontally in div

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

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

<-- Html -->

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

horizontal centering (css)

.container {
  width: 980px;
  margin: 0 auto;
}