Skip to content
Related Articles
Open in App
Not now

Related Articles

Blaze UI Alignment Centered Absolutely

Improve Article
Save Article
  • Last Updated : 12 Apr, 2022
Improve Article
Save Article

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.

Alignment helps us to place the right element at the right place on the screen. The Blaze UI provides us with multiple classes that help us to align objects on the screen. There are multiple types of alignments in Blaze UI, such as centered, vertical, horizontal, centered absolutely, and much more. 

In this article, we will discuss the centered absolutely alignment in Blaze UI. Centered absolutely alignment positions an element perfectly in the center of a relative container both horizontally as well as vertically. To position an element to the absolute center of its parent element, we use the .u-absolute-center class. The .u-absolute-center class positions the given element to the exact center of the parent element.

Class used for Centered absolutely alignment:

  • .u-absolute-center: This class positions the element to the absolute center of the parent element.

Syntax:

<div>
    <div class="u-absolute-center">Content</div>
</div>

Example 1: This example demonstrates the text element centered inside a div using the centered absolutely class of Blaze UI.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Blaze UI</title>
    <meta charset="utf-8">
    <meta name="viewport" 
    content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <style>
        .demo{
            height: 500px;
            width: 500px;
            background-color: green;
            color: white;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <strong>Blaze UI Centered absolutely</strong>
        <br>
        <div class="demo">
            <div class="u-absolute-center">
                Hello Blaze
            </div>
        </div>
    </center>
</body>
</html>


Output:

Output

Example 2: This example demonstrates the image element centered inside a div using the centered absolutely class of Blaze UI.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Blaze UI</title>
    <meta charset="utf-8">
    <meta name="viewport" 
    content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <style>
        .demo{
            height: 500px;
            width: 500px;
            background-color: green;
            color: white;
        }
    </style>
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <strong>Blaze UI Centered absolutely</strong>
        <br>
        <div class="demo u-center-block">
            <div class="u-absolute-center">
                <img src=
            </div>
        </div>
    </center>
</body>
</html>


Output:

Output

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!