advanced search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

crs on 01/28/08


Tagged

alignment position centering


Versions (?)


Who likes this?

1 person has marked this snippet as a favorite

SmpleJohn


Centering an element in page with absolute position

Published in: CSS 

URL: http://blog.sympozium.gr/

Our need is very simple. We need a pop-up message, or a div element in general, to appear at the middle of the page anytime using only style sheets.

Our problem is that there is no “center” property in css, like “left” of “right” which can be used with “position:absolute”.

To make it align at the center of the x-axis you have to play the game of percentages. Give to your element a width in percentage (ex. width: 30%), remove the 30% from the 100% of the browsers window and you get the left 70%. Then divide this 70% into two pieces and you get 35%. That the equal left and right margin, our element will have.


Plain TextExpand 
  1. <p class="hover_message">The image uploaded successfully</p>
  2.  
  3. p.hover_message {
  4.   position: absolute;
  5.   width: 30%;
  6.   left: 35%;
  7. }

Report this snippet 

Comments

RSS Icon Subscribe to comments
Posted By: SmpleJohn on January 28, 2008

Out of curiosity, why would you need a separate ie & moz tag? "margin:auto;" should work in both.

Posted By: SmpleJohn on January 28, 2008

Out of curiosity, why would you need a separate ie & moz tag? "margin:auto;" should work in both.

Posted By: adix on January 28, 2008

<style type="text/css"> .ie-center { text-align:center; }

.moz-center { margin:auto; text-align:center; width:250px; }

.center-box { border:1px solid #efefef; background:#efefef; width:100%; height:125px; } </style>

<div class="ie-center"> <div class=""> <div class="center-box"></div> </div> </div>

center-box will be centered, will have 250px in width.

Posted By: adix on January 28, 2008

<style type="text/css"> .ie-center { text-align:center; }

.moz-center { margin:auto; text-align:center; width:250px; }

.center-box { border:1px solid #efefef; background:#efefef; width:100%; height:125px; } </style>

<div class="ie-center"> <div class=""> <div class="center-box"></div> </div> </div>

center-box will be centered, will have 250px in width.

Posted By: adix on January 28, 2008

Your code is correct, but you are wrong. Using percentages would result in elements that are larger than the ones the user actually needs.

Try this: .ie-center { text-align:center; } .moz-center { margin:auto; text-align:center; width:250px; } .center-box { border:1px solid #efefef; background:#efefef; }

center-box will be centered, will have 250px in width.

You need to login to post a comment.