CSS: center element within a <div> element

Question

To center an HTML element I can use the CSS left: 50%;. However, this centers the element with respect to the whole window.

I have an element which is a child of a <div> element and I want to center the child with respect to this parent <div>, not the whole window.

I do not want the container <div> to have all its content centered, just the one specific child.

Answer 1

Set text-align:center; to the parent div, and margin:auto; to the child div.

#parent {      text-align:center;      background-color:blue;      height:400px;      width:600px;  }  .block {      height:100px;      width:200px;      text-align:left;  }  .center {      margin:auto;      background-color:green;  }  .left {      margin:auto auto auto 0;      background-color:red;  }  .right {      margin:auto 0 auto auto;      background-color:yellow;  }

<div id="parent">      <div id="child1" class="block center">          a block to align center and with text aligned left      </div>      <div id="child2" class="block left">          a block to align left and with text aligned left      </div>      <div id="child3" class="block right">          a block to align right and with text aligned left      </div>  </div>

This a good resource to center mostly anything.
http://howtocenterincss.com/