Blaze UI Centered Alignment

Last Updated : 23 Jul, 2025

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

In this article, we will learn about Blaze UI Centered Alignment. It is used to place the content at the center whether horizontally / vertically / or both.

Used Classes:

  • u-center-block: This class is used to set the position to relative.
  • u-center-block__content: This class has three things to do; sets left to 50%, set position to absolute, and sets top to 50%, which finally help in placing the content to center.

Syntax

<div class="u-center-block ">
     <div class="u-center-block__content">Content</div>
</div>

Example 1: In this example, we will write some text.  The text written inside a div with class u-center-block__content will be center-aligned vertically as well as horizontally. We have used background colors for your better understanding.

HTML 
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@12.2.0/dist/blaze/blaze.css">
</head>

<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    
    <h3> Blaze UI Alignment Centered</h3>
    
    <div class="u-center-block " 
        style="background: pink;width:50%">
        Hi Geek!!
        <br><br>
        <div class="u-center-block__content" 
            style="background: yellow;">
            GeeksforGeeks
        </div>
    </div>
</body>

</html>

Output:

 

The yellow-colored div is center aligned horizontally as well as vertically.

Example 2: In this example, we will show how we can center align a div containing an image as well as a <p> tag, vertically as well as horizontally.

HTML 
<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@12.2.0/dist/blaze/blaze.css">
</head>

<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>
    
    <h3> Blaze UI Alignment Centered</h3>
    
    <div class="u-center-block " 
        style="background:pink; height:400px;width:50%">
        <div class="u-center-block__content">
            
<p>GeeksforGeeks</p>

            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210203171024/CSSTutorial.png"
                height=100px width=100px />
        </div>
    </div>
</body>

</html>

Output:

 

Reference: https://www.blazeui.com/utils/alignment/

Comment

Explore