How to Center a Container in My HTML/Css

How do I center a container in my HTML/CSS?

Jsfiddle: http://jsfiddle.net/2gtsK/show/

Removed width from body, Added margin:0 auto to #box

margin:0 auto is same as:

margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;

body
{
    height: 750px;
    margin: 2px;
    padding: 2px;
}

#box 
{
    width: 1000px;
    margin: 0 auto;
    height:100%;
    border:1px solid #8D8D8D;
}

CSS container won't center

Solution #1:

Replace position: absolute; with position: relative; in #content(CSS).

JSFiddle - DEMO and Full Screen View

body, html {

    background-color:#FFF;

    height:100%;

}

#content {

    width:980px;

    height: 100%;

    background-color:#FCC;

    position: relative;

    display: block;

    margin-left: auto;

    margin-right: auto;

    top: 0px;

    bottom:0px;

    text-align:center;

}

<div id="content">hello world!</div>

Bootstrap centering container in the middle of the page

To vertically center your container, you must set the parent to min-height 100vh and height 100%, and then you can add flex to the parent to center it. An example below:

HTML:

<div class="parent container d-flex justify-content-center align-items-center h-100">
  <div class="child"> <!-- Your code goes inside this div/form --> </div>
</div>

Please note that h-100 means "height: 100%", so you should solve it using a bit of CSS:

.parent {
  min-height: 100vh;
}

And, a friendly reminder, "parent" is like "body". If the body isn't 100vh, you won't be able to center it. In other words, if "body" is 100vh, its child should be 100%. If your structure is more like:

<body><div><div><div class="me"><form></form></div></div></div></body>

Your body should be "min-height: 100vh; height: 100%" and all your divs should be "height: 100%". Then, you should add the flex classes to form's parent (the one with the class "me"). Hope it helps you. I encourage you to learn the CSS box model, it'll help you understand everything. And please, avoid the "position: absolute" technique.

Here you can learn more about the box model: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model

how to center Items that are not in div or span in html/css

You can define the display property as "flex".

<html><img src="img.jpg" class="Myimg"></html>

.Myimg
{
display: flex;
justify-content: center;
}

Align Container In The Center

If I were you I would look into Flexbox. A solution to your problem would be to add a wrapper around your container and do this styling on it:

.wrapper { display: flex;
        justify-content:center;
}

Maybe something like this: https://jsfiddle.net/s35x607o/1/

For more really nice reading, check out https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Div container won't center using CSS & HTML

You want to center a div without specified width. For that, first remove ul{width:60%;}, then add text-align:center to the Parent and display:inline-block to the Child :

#container{
    text-align:center;  
}
ul{
    display:inline-block;   
}

body{

 margin:0;

 overflow: hidden;

 }

 

ul{

 list-style-type:none;

 overflow:hidden;

 padding:0px;

 margin: 0 auto;

 text-align:center;

 display:inline-block; 

}

ul li{

 text-transform:uppercase;

 float:left; 

}

ul li a{

 display: block;

 width: 120px;

 text-decoration:none;

 background-color:#98bf21;

 text-align:center;

 margin:0px;

 padding:10px;

 font-weight:Bold;

 color:#fff;

 font-family:Arial;

 letter-spacing: 1px;

}

ul li a:hover{

 background-color:#7A991A; 

}

#container{

 width:100%;

    text-align:center;  

}

<body> 

  <div id = "container">

    <ul>

   <li><a href = "#">Home</a></li>

   <li><a href = "#">News</a></li>

   <li><a href = "#">Contact</a></li>

   <li><a href = "#">About</a></li>

    </ul>

  </div>

</body>