if(true) { (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); } if (typeof ga === "function") { ga('create', 'G-EZ0B2QJ2Z6', 'auto', {}); }4 Quickest way to center element in CSS | RAHULISM

4 Quickest way to center element in CSS

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.

© 2020 RAHULISM • Developed with ❤️ and 🍕 by RAHUL