Let's say you want to design a Website with the content floating in the middle. Some coders like to use liquid layouts, which means that the horizontal width of the content div box changes according to the size of the browser window. Other designers use fixed-width layouts, which means that the width of the content div box will remain the same independent from the size of the browser window
How to center a liquid-width div box
First, let's focus on how to center a liquid-width div box.
The general idea behind liquid-width centering is very simple: just set the same distance for the left margin and the right margin. We'll use percentage units.
<div style="margin-left:20%; margin-right:20%;">
How to center a fixed-width div box
To center a fixed-width div...
- both the left and right margins should be set to auto
- set the width value for the div box
When both left and right margins are auto, web browsers give them equal width.
Like this:
<div style="margin-left:auto; margin-right:auto; width:500px;">
I tested this CSS code with the following browsers:
- Internet Explorer 7
- Mozilla Firefox 2
- Safari 3
Here is the code for 4 examples of div box centering.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Center DIV</title>
<meta name="keywords" content="css center div horizontally, css, html, div, website design, web design, horizontal div centering" />
<meta name="description" content="Live example - horizontally centering a div using css" />
<style>
body
{
font-family:"Myriad Pro", Arial, sans-serif, monospace;
font-size:1em;
color:#333333;
}
.group
{
background-color:#F1F1F1;
border:1px #CCCCCC solid;
margin-top:50px;
margin-bottom:50px;
text-align:left;
}
</style>
</head>
<body>
<div class="group" style="margin-left:20%; margin-right:20%; padding:20px;">
<h1>Liquid div centering horizontally</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien tortor, commodo ut, interdum eu, molestie vel, felis. Etiam malesuada. Cras vehicula, dolor eleifend pretium consequat, neque felis placerat augue, nec vehicula ante elit ut tellus. Duis rutrum nulla in ipsum. Morbi iaculis. Aenean egestas aliquam lorem. Donec tortor odio, posuere vel, porttitor vitae, malesuada eget, velit. Vivamus non elit sit amet enim sodales molestie. Proin porttitor, sem a venenatis porta, felis turpis mattis dui, non dignissim quam enim a quam. Donec molestie magna et ante. Curabitur orci ligula, ultricies id, auctor vitae, egestas vitae, lorem. Sed tristique.</p>
<p>Ut placerat velit faucibus sapien. Curabitur a libero ac neque semper facilisis. Integer a eros sit amet neque pretium vehicula. Aliquam erat volutpat. Suspendisse tortor lectus, convallis in, dignissim quis, venenatis eget, eros. Sed a nisi.
</p>
</div>
<div class="group" style="background-color:#999999; margin-left:20%; margin-right:20%; padding:20px;">
<div class="group" style="margin-left:10%; margin-right:10%; padding:10px;">
<h1>Liquid div centering horizontally inside another liquid-width div</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien tortor, commodo ut, interdum eu, molestie vel, felis. Etiam malesuada. Cras vehicula, dolor eleifend pretium consequat, neque felis placerat augue, nec vehicula ante elit ut tellus. Duis rutrum nulla in ipsum. Morbi iaculis. Aenean egestas aliquam lorem. Donec tortor odio, posuere vel, porttitor vitae, malesuada eget, velit. Vivamus non elit sit amet enim sodales molestie. Proin porttitor, sem a venenatis porta, felis turpis mattis dui, non dignissim quam enim a quam. Donec molestie magna et ante. Curabitur orci ligula, ultricies id, auctor vitae, egestas vitae, lorem. Sed tristique.</p>
<p>Ut placerat velit faucibus sapien. Curabitur a libero ac neque semper facilisis. Integer a eros sit amet neque pretium vehicula. Aliquam erat volutpat. Suspendisse tortor lectus, convallis in, dignissim quis, venenatis eget, eros. Sed a nisi.
</p>
</div>
</div>
<div class="group" style="margin:auto; width:500px; padding:20px;">
<h1>Center fixed-width div horizontally</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien tortor, commodo ut, interdum eu, molestie vel, felis. Etiam malesuada. Cras vehicula, dolor eleifend pretium consequat, neque felis placerat augue, nec vehicula ante elit ut tellus. Duis rutrum nulla in ipsum. Morbi iaculis. Aenean egestas aliquam lorem. Donec tortor odio, posuere vel, porttitor vitae, malesuada eget, velit. Vivamus non elit sit amet enim sodales molestie. Proin porttitor, sem a venenatis porta, felis turpis mattis dui, non dignissim quam enim a quam. Donec molestie magna et ante. Curabitur orci ligula, ultricies id, auctor vitae, egestas vitae, lorem. Sed tristique.</p>
<p>Ut placerat velit faucibus sapien. Curabitur a libero ac neque semper facilisis. Integer a eros sit amet neque pretium vehicula. Aliquam erat volutpat. Suspendisse tortor lectus, convallis in, dignissim quis, venenatis eget, eros. Sed a nisi.
</p>
</div>
<div class="group" style="background-color:#999999; margin:auto; width:700px; padding-top:15px; padding-bottom:15px; margin-top:50px;">
<div class="group" style="margin:auto; width:400px; padding:20px;">
<h1>Horizontal centering fixed-width div inside another fixed-width div</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien tortor, commodo ut, interdum eu, molestie vel, felis. Etiam malesuada. Cras vehicula, dolor eleifend pretium consequat, neque felis placerat augue, nec vehicula ante elit ut tellus. Duis rutrum nulla in ipsum. Morbi iaculis. Aenean egestas aliquam lorem. Donec tortor odio, posuere vel, porttitor vitae, malesuada eget, velit. Vivamus non elit sit amet enim sodales molestie. Proin porttitor, sem a venenatis porta, felis turpis mattis dui, non dignissim quam enim a quam. Donec molestie magna et ante. Curabitur orci ligula, ultricies id, auctor vitae, egestas vitae, lorem. Sed tristique.</p>
<p>Ut placerat velit faucibus sapien. Curabitur a libero ac neque semper facilisis. Integer a eros sit amet neque pretium vehicula. Aliquam erat volutpat. Suspendisse tortor lectus, convallis in, dignissim quis, venenatis eget, eros. Sed a nisi.
</p>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CSS Center DIV</title>
<meta name="keywords" content="css center div horizontally, css, html, div, website design, web design, horizontal div centering" />
<meta name="description" content="Live example - horizontally centering a div using css" />
<style>
body
{
font-family:"Myriad Pro", Arial, sans-serif, monospace;
font-size:1em;
color:#333333;
}
.group
{
background-color:#F1F1F1;
border:1px #CCCCCC solid;
margin-top:50px;
margin-bottom:50px;
text-align:left;
}
</style>
</head>
<body>
<div class="group" style="margin-left:20%; margin-right:20%; padding:20px;">
<h1>Liquid div centering horizontally</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien tortor, commodo ut, interdum eu, molestie vel, felis. Etiam malesuada. Cras vehicula, dolor eleifend pretium consequat, neque felis placerat augue, nec vehicula ante elit ut tellus. Duis rutrum nulla in ipsum. Morbi iaculis. Aenean egestas aliquam lorem. Donec tortor odio, posuere vel, porttitor vitae, malesuada eget, velit. Vivamus non elit sit amet enim sodales molestie. Proin porttitor, sem a venenatis porta, felis turpis mattis dui, non dignissim quam enim a quam. Donec molestie magna et ante. Curabitur orci ligula, ultricies id, auctor vitae, egestas vitae, lorem. Sed tristique.</p>
<p>Ut placerat velit faucibus sapien. Curabitur a libero ac neque semper facilisis. Integer a eros sit amet neque pretium vehicula. Aliquam erat volutpat. Suspendisse tortor lectus, convallis in, dignissim quis, venenatis eget, eros. Sed a nisi.
</p>
</div>
<div class="group" style="background-color:#999999; margin-left:20%; margin-right:20%; padding:20px;">
<div class="group" style="margin-left:10%; margin-right:10%; padding:10px;">
<h1>Liquid div centering horizontally inside another liquid-width div</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien tortor, commodo ut, interdum eu, molestie vel, felis. Etiam malesuada. Cras vehicula, dolor eleifend pretium consequat, neque felis placerat augue, nec vehicula ante elit ut tellus. Duis rutrum nulla in ipsum. Morbi iaculis. Aenean egestas aliquam lorem. Donec tortor odio, posuere vel, porttitor vitae, malesuada eget, velit. Vivamus non elit sit amet enim sodales molestie. Proin porttitor, sem a venenatis porta, felis turpis mattis dui, non dignissim quam enim a quam. Donec molestie magna et ante. Curabitur orci ligula, ultricies id, auctor vitae, egestas vitae, lorem. Sed tristique.</p>
<p>Ut placerat velit faucibus sapien. Curabitur a libero ac neque semper facilisis. Integer a eros sit amet neque pretium vehicula. Aliquam erat volutpat. Suspendisse tortor lectus, convallis in, dignissim quis, venenatis eget, eros. Sed a nisi.
</p>
</div>
</div>
<div class="group" style="margin:auto; width:500px; padding:20px;">
<h1>Center fixed-width div horizontally</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien tortor, commodo ut, interdum eu, molestie vel, felis. Etiam malesuada. Cras vehicula, dolor eleifend pretium consequat, neque felis placerat augue, nec vehicula ante elit ut tellus. Duis rutrum nulla in ipsum. Morbi iaculis. Aenean egestas aliquam lorem. Donec tortor odio, posuere vel, porttitor vitae, malesuada eget, velit. Vivamus non elit sit amet enim sodales molestie. Proin porttitor, sem a venenatis porta, felis turpis mattis dui, non dignissim quam enim a quam. Donec molestie magna et ante. Curabitur orci ligula, ultricies id, auctor vitae, egestas vitae, lorem. Sed tristique.</p>
<p>Ut placerat velit faucibus sapien. Curabitur a libero ac neque semper facilisis. Integer a eros sit amet neque pretium vehicula. Aliquam erat volutpat. Suspendisse tortor lectus, convallis in, dignissim quis, venenatis eget, eros. Sed a nisi.
</p>
</div>
<div class="group" style="background-color:#999999; margin:auto; width:700px; padding-top:15px; padding-bottom:15px; margin-top:50px;">
<div class="group" style="margin:auto; width:400px; padding:20px;">
<h1>Horizontal centering fixed-width div inside another fixed-width div</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sapien tortor, commodo ut, interdum eu, molestie vel, felis. Etiam malesuada. Cras vehicula, dolor eleifend pretium consequat, neque felis placerat augue, nec vehicula ante elit ut tellus. Duis rutrum nulla in ipsum. Morbi iaculis. Aenean egestas aliquam lorem. Donec tortor odio, posuere vel, porttitor vitae, malesuada eget, velit. Vivamus non elit sit amet enim sodales molestie. Proin porttitor, sem a venenatis porta, felis turpis mattis dui, non dignissim quam enim a quam. Donec molestie magna et ante. Curabitur orci ligula, ultricies id, auctor vitae, egestas vitae, lorem. Sed tristique.</p>
<p>Ut placerat velit faucibus sapien. Curabitur a libero ac neque semper facilisis. Integer a eros sit amet neque pretium vehicula. Aliquam erat volutpat. Suspendisse tortor lectus, convallis in, dignissim quis, venenatis eget, eros. Sed a nisi.
</p>
</div>
</div>
</body>
</html>
Comments for "How to center a div block horizontally the simple and easy way"
There are no comment for this tutorial yet. Be the first one to comment on this tutorial!
discuss this topic to forum
