Rahul
RAHULISM

RAHULISM

4 Quickest way to center element in CSS

4 Quickest way to center element in CSS

Rahul
·Nov 18, 2020·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Centering element in CSS is hard and confusing for the learning developers. My latest post regarding centering element in CSS by 4 quick ways. We gonna use some CSS property to center them.


HTML

Let's take an example of HTML that we will center.

<div class="parent">
    <p class="child">
        I'm Awesome
    </p>
</div>

Let's Center using CSS

1. Flex Property
-> The flex property sets the flexible length on flexible items.

.parent{
       display: flex;
       justify-content: center;
       align-items: center;
  }

Note: If the element is not a flexible item, the flex property has no effect.


2. Position Property

The position property specifies the type of positioning method used for an element.

.parent {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
 }

3. Grid Property The grid CSS property is a shorthand property that sets all of the explicit and implicit grid properties in a single declaration.

 .parent {
     height: 100vh;
     display: grid;
     palce-items: center;
 }

4. Margin Property
The margin property sets the margins for an element.

.parent {
   height: 100vh;
   display: grid;
 }
.parent .child{
  margin: auto;
  }


Thanks For Reading ♥
Let me know about this post in the comments.
Originally here -> https://rahulism.co/center-using-css

Did you find this article valuable?

Support Rahul by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
 
Share this