CSS Using CSS To Center Content Tutorial

Centering things horizontally with CSS is straightforward once you learn a couple of techniques. In this article you learn how to center any type of content, such as a block of text, an image, a table, a div element, or an entire page, all using CSS.

CSS centering: The basic technique

The trick to centering an element with CSS is to give the element a left and right margin value of auto:

#myElement
{
width: 500px;
margin-left: auto;
margin-right: auto;
}


Note that you need to specify a width for the element when using this technique, otherwise the browser has no way of knowing the intended width.

Center a page

To center all the content in a page horizontally within the browser window, first make sure the content is inside a container div element, and give the div a width. You can then apply auto margins to the div:

#container
{
width: 40em;
margin-left: auto;
margin-right: auto;
}


Here's an example of centering a page.

Centering images, tables and more

You can center any content using the same technique. Just remember that you have to give the content element a width. This can be a fixed width, such as pixels or ems, or a percentage width.

Centering an image

Images are displayed inline by default, which means that auto margins have no effect. Therefore, to center an image you need to display it as a block-level element:

#myImage
{
width: 50px;
height: 50px;
margin-left: auto;
margin-right: auto;
display: block;
}


To find out how to center CSS background images, see Controlling background images and colours.

Centering a table

Here's how you might center a fixed-width table:

#myTable
{
width: 10em;
margin-left: auto;
margin-right: auto;
}


...and a percentage-width table:

#myTable
{
width: 80%;
margin-left: auto;
margin-right: auto;
}


Centering text

Text content is a bit of a special case. There are 2 ways to center text with CSS:

1. Center the block of text within the page (using the technique already described)
2. Center-align the text itself, using the text-align: center property

You can use both techniques at the same time if needed.

Here are some examples — they all use this markup:

<div id="myText">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>


Centering text within the page

#myText
{
width: 20em;
margin-left: auto;
margin-right: auto;
}


Center-aligning text

#myText
{
width: 20em;
text-align: center;
}


Centering text within the page and center-aligning the text

#myText
{
width: 20em;
margin-left: auto;
margin-right: auto;
text-align: center;
}


That's it! You now know how to center any type of content — whether it's a div, an image, a table, some text, or the whole page — using pure CSS. Have fun!

Source :- tutorialized.com