How to Center Floated Divs in a Container , How to Center a Floating div

Float div on center of page

Div on center of screen

In CSS, float-based layouts are not much flexible, however, a float is somewhat more difficult to center.

Is there any way to center floating elements?

Floated div centered

This is an age old question. You can float left or right, but there's no way to float center in CSS layout.

Positioning DIV element at center of screen

You can solve it in a simple way.

margin: 0 auto;

The above code states that the TOP margin and Bottom margin are set to 0 and LEFT margin and Right margin set to auto (automatic). Here the automatic left and right margins push the element into the center of its container.

How to display div in center of screen

From the above picture you can understand how it display at the center of the screen.

margin: 0 auto;

is equal to

margin 0 auto 0 auto;

or you can write like the following:

margin-top:0;
margin-right:auto;
margin-bottom:0;
margin-left:auto;

The following source code shows how to center Div in the middle of browser.

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    .centerDiv
    {
      width: 60%;
      height:200px;
      margin: 0 auto;
      background-color:#FFA500 ;
    }
  </style>
</head>
<body>
  <div class="centerDiv">
  </div>
</body>
</html>

Two column layout Div at the center of the screen

Center Floated Divs in a Container

Source Code

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    .centerDiv
    {
      width: 60%;
      height:200px;
      margin: 0 auto;
      background-color:#FFA500 ;
    }
    .div1
    {
      width: 50%;
      height:200px;
      background-color:#A52A2A ;
      float:left;
    }
    .div2
    {
      width: 50%;
      height:200px;
      background-color:#FFA500 ;
      float:left;
    }
  </style>
</head>
<body>
  <div class="centerDiv">
  <div class="div1">
  </div>
  <div class="div2">
  </div>
  </div>
</body>
</html>

Position Div Exactly at the center of the screen

Center div on page vertically , Center div on page horizontally

Exactly center means, position Div horizondaly and virtically at the center of the screen.

div vertcally center horizontally center

Source Code

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    .exactCenter {
      width:200px;
      height:200px;
      position: fixed;
      background-color: #00FF00;
      top: 50%;
      left: 50%;
      margin-top: -100px;
      margin-left: -100px;
    }
  </style>
</head>
<body>
  <div class="exactCenter">
  </div>
</body>
</html>

Horizontal Divs at the center of the browser

Show div on center of screen

Source Code

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    .div1
    {
      width: 50%;
      height:70px;
      background-color:#A52A2A ;
      margin: 0 auto;
    }
    .div2
    {
      width: 50%;
      height:70px;
      background-color:#FFA500 ;
      margin: 0 auto;
    }
    .div3
    {
      width: 50%;
      height:70px;
      background-color:#008000 ;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="div1">
  </div>
  <div class="div2">
  </div>
  <div class="div3">
  </div>
</body>
</html>

Three column layout Div at the center of the screen

Place div on center of screen

Source Code

<!DOCTYPE html>
<html >
<head>
  <style type="text/css">
    .centerDiv
    {
      width: 60%;
      height:200px;
      margin: 0 auto;
      background-color:#FFA500 ;
    }
    .div1
    {
      width: 33%;
      height:200px;
      background-color:#A52A2A ;
      float:left;
    }
    .div2
    {
      width: 34%;
      height:200px;
      background-color:#FFA500 ;
      float:left;
    }
    .div2
    {
      width: 33%;
      height:200px;
      background-color:#008000 ;
      float:left;
    }
  </style>
</head>
<body>
  <div class="centerDiv">
  <div class="div1">
  </div>
  <div class="div2">
  </div>
  <div class="div3">
  </div>
  </div>
</body>
</html>