Open In App

Blaze UI Alignment Centered Absolutely

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 12 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads