How To Center Anything With CSS

How to Center Anything with Cascading Style Sheets (CSS)

CSS is a stylesheet language that describes the presentation of an HTML (or XML) document.

CSS describes how elements must be rendered on screen, on paper, or in other media is a great way to center images, blocks of text, and even your entire layout. Most of these properties have been in CSS since version 1, and they work great with CSS3. Centering is an alignment that can be very useful for web designers. And CSS is the best way to center everything. 

Also Check: 5 CSS Tricks to Avoid Cross Browser Issues

---

Here are four ways to center things using CSS:

• centering text
• centering a block
• centering an image
• vertically centering a block or image

---

 1. Centering Text with CSS

The most common and (therefore) easiest type of centering is that of lines of text in a paragraph or in a heading. CSS has the property 'text-align' for that: 

p.center { text-align: center; }

Every paragraph written with the “center” class will be centered horizontally inside the parent element, or the width of the paragraph if that is set. Here’s the associated HTML:

<p class="center">This text is centered.</p> 

Here i mention some Some point to remember when centering text with the text-align property:

• Text that is centered with the text-align property will be centered within the container element.
• This is an alignment of the text, like left alignment, right alignment, and justified alignment. It doesn’t move the entire block of text to the center. 

---

2. Centering Blocks of Content with CSS


Blocks are any element on your page that has a defined width. This includes layout blocks. The proper way to center blocks with CSS is to set both the left and right margins to auto. Here is the CSS:

div.center {
  margin-left: auto;
  margin-right: auto;
  width: 8em;
}

And this is the HTML that applies to:

<div class="center">This entire block is centered, but the text inside it is left aligned.</div>

---

3. Centering Images with CSS 

Most browsers will display images centered using the same text-align property, it’s not a good idea to rely on that technique, you should explicitly tell the browser that the image is a block element. Then you can center it as you would a block. Here is the CSS:

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

 And here is the HTML that is centered:

<img src="sample.jpg" alt="webredesign" class="center" /> 

---

4. Vertically Centering Elements using CSS


Centering elements vertically with css is something that often gives designers trouble. There are however a variety of methods for vertical centering and each is fairly easy to use.

How to vertically center items in a container:

• Place the elements to be centered inside a containing element, such as a DIV.
• Set a minimum height on the containing element.
• Declare that that containing element is a table cell.
• Set the vertical alignment to "middle".

For example:

    .vcenter {
      min-height: 12em;
      display: table-cell;
      vertical-align: middle;
    }

And here is the HTML:

    <div class="vcenter">
    <p>This text is vertically centered in the box.</p>
    </div> 

There are some ways to force IE to center and then use conditional comments so that only IE sees the styles. But they are ugly. I’d rather just wait for real vertical centering to be supported in the browser.