Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to make elements float to center?

  • Last Updated : 30 Jul, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




<!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>                    

Output:

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






<!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>                    

Output:

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!