How do you easily horizontally center a using CSS? [duplicate]

Answer 1

After nine years I thought it was time to bring a new version. Here are my two (and now one) favourites.

Margin

Set margin to auto. You should know the direction sequence is margin: *top* *right* *bottom* *left*; or margin: *top&bottom* *left&right*

aside{
    display: block;
    width: 50px;
    height: 100px;
    background-color: green;
    float: left;
}

article{
    height: 100px;
    margin: 0 0 0 50px; /* 50px aside width */
    background-color: grey;
}

div{
  margin: 0 auto;
  display:block;
  width: 60px;
  height: 60px;
  background-color: blue;
  color: white;
}

    
    
    
        

        
        
           
                
The div
        
    

Center: Depricated, don't use this!

Use

tags as a wrap around your

.

Example:

aside{
    display:block;
    background-color:green;
    width: 50px;
    height: 100px;
    float: left;
}

center{
    display:block;
    background-color:grey;
    height: 100px;
    margin-left: 50px; /* Width of the aside */
}

div{
    display:block; 
    width: 60px; 
    height: 60px; 
    background-color:blue;
    color: white;
}

    
    
    
        

        
        

            
                
The div