CSS: How to Center Box Div Element Directly in Center

css: how to center box div element directly in center?

top and left correspond to the top-left corner of your box. What you're trying to do is have them correspond to the center. So if you set margin-top and margin-left to negative of one-half the height and width respectively, you'll get a centered box.

Example for a 300x200 box:

width: 300px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -150px;
margin-top: -100px;

center a div box

This should work:

margin:0px auto;

Or you can even try this if you want:

margin:auto;
position:relative;
width: 600px; /* or whatever width */

How to align a div to the middle (horizontally/width) of the page

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

How can I center a div within another div?

You need to set the width of the container (auto won't work):

#container {
    width: 640px; /* Can be in percentage also. */
    height: auto;
    margin: 0 auto;
    padding: 10px;
    position: relative;
}

The CSS reference by MDN explains it all.

Check out these links:

auto - CSS reference | MDN
margin - CSS reference | MDN
What is the meaning of auto value in a CSS property - Stack Overflow

In action at jsFiddle.

How to center an element horizontally and vertically

Approach 1 - transform translateX/translateY:

Example Here / Full Screen Example

In supported browsers (most of them), you can use top: 50%/left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically vertically/horizontally center the element.

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

<div class="container">
    <span>I'm vertically/horizontally centered!</span>
</div>

CSS: center element within a div element

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>

How can I center an absolutely positioned element in a div?

<body>  <div style="position: absolute; left: 50%;">    <div style="position: relative; left: -50%; border: dotted red 1px;">      I am some centered shrink-to-fit content! <br />      tum te tum    </div>  </div></body>

CSS: How to Center Box Div Element Directly in Center