How to horizontally center a div inside a div using css

Yes its very easy to center a block element inside other block element using simple css. Here is an example.

If you have following HTML code:

1
2
3
<div class="outerDiv">
    <div class="innerDiv"></div>
</div>

This is how we make innerDiv center horizontally.

1
2
3
4
5
6
7
8
9
10
11
12
13
.outerDiv{
width:100%
}
.innerDiv {
    width: 980px;
    margin: 0 auto;
}
 
if you are using IE8+ you have to do things like.
 
.innerDiv {
   display: table;
}

Recently Published

»

Wix Offers Best Free Web Apps for Artists and Photographers

The famous online website builder Wix is known for providing the ...

»

What You Should Know Before Setting Up a Digital Marketing and Web Design Company

Running a digital marketing and web designing company can be a ...

»

Important Factors to Think About When Starting a Mailing List

Many bloggers and business owners don’t have a mailing list, ...

»

Tried and Tested Strategies for Boosting eBook Sales

As you have by now realized, writing your ebook was just the first ...

»

What Really Makes a Website User-Friendly

Whether it’s for business or personal use, having a website online ...

»

5 Features of Virtual Private Server that put you in complete Control of Your Website

For a decade now, virtual private server has been a preferred hosting ...

»

8 Ways the Right Ecommerce Platform Makes Your Business Perform Better

Starting your own ecommerce store is an exciting experience, but ...

»

The SSL certificates and why are they essential for sites

What are SSL and its purpose? SSL is a modern technology that is ...

»

Entering Into M-Commerce as a Small Business

According to a December 2016 Business Insider article, the U.S. ...