Use absolute positioning to center a box on screen in HTML and CSS

Description

The following code shows how to use absolute positioning to center a box on screen.

Example


<!--from w w w  .  j av  a  2  s. c  o  m-->





<html>
<head>

<title>Using absolute positioning to center a box onscreen</title>
<style type="text/css" media="screen">


body {
background: #666666;
}

#wrapper {
background: #ffffff;
border: 4px solid #000000;
padding: 20px;
width: 400px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -222px;
margin-top: -172px;
}
</style>
</head>
<body>
<div id="wrapper">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
<p>Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum.</p>
<p>Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros. Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio.</p>
</div>
</body>
</html>

Click to view the demo

The code above generates the following result.

Use absolute positioning to center a box on screen in HTML and CSS

Home »
  HTML CSS Tutorial »
    Layout »
      Position

...
Absolute left offset Stretch a block in HTM...
Align Sized Absolute block right in HTML an...
Center a div element with absolute to four ...
Compare the absolute and relative CSS Posit...
Create absolute position with bottom and ri...
Create absolute position with top and right...
Doc absolute positioning blocks in HTML and...
Do absolutely positioned relative to the br...
Do left align the left side of an absolute ...
Do position absolute layout and set z-index...
Force element to horizontally stretch conte...
Layout absolute to left top, and right bott...
Place element absolute outside Top Right wi...
Put div to right bottom corner with absolut...
Stick element to the left bottom with absol...
Stretch Absolute right offset in HTML and C...
Top Align Absolute block in HTML and CSS
Top-left Absolute positioned element in HTM...

Use absolute positioning to center a box on...