How to make elements float to center?

The CSS float property is used to set or return the horizontal alignment of elements. But this property allows an element to float only right or left side of the parent body with rest of the elements wrapped around it. There is no way to float center in CSS layout. So, we can center the elements by using position property.

Example 1: This example set the position of elements exactly at the center of the screen.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Make float to center to element
    </title>
      
    <!-- Style to set element float
        to center -->
    <style>
        .Center {
            width:200px;
            height:200px;
            position: fixed;
            background-color: blue;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -100px;
        }
    </style>
</head>
  
<body>
    <div class="Center"></div>
</body>
  
</html>                    

chevron_right


Output:



Example: This example set the position of text float elements exactly at the center of the screen.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
      
    <!-- Style to set text-element
        to center -->
    <style>
        .center {
            text-align-last: center;
            border: 2px solid black;
        }
    </style>
</head>
  
<body>
    <h2 style = "text-align:center">
        Text is centered:
    </h2>
      
    <div class="center">
        <p>
            <font color="green">
                GeeksForGeeks A Computer
                Science Portal for Geeks
            </font>
        </p>
    </div>
</body>
  
</html>                    

chevron_right


Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.