Forem: malapashish

Mastering React Re-Renders : The Key Prop Hack You Need to Know

malapashish — Sat, 25 May 2024 15:43:19 +0000

One of React's main features is its efficient re-rendering process. Unlike core JavaScript, which re-renders the entire DOM tree, React re-renders only the elements that have changed. A critical factor in this process is the key prop, which helps React identify which items need to be updated, added, or removed.

But did you know you can also force React to re-render a specific component using this prop? Interesting, right? Let's dive into how it works.

What is the Key Prop?

The key prop in React is usually assigned to list elements. It helps React track which elements have changed, need to be updated, or removed.

Why Use Keys to Force Re-renders?

Sometimes, you might need to force a component to re-render, perhaps to reset its internal state or ensure it fully updates when receiving new props. Changing the key prop is a straightforward way to accomplish this because it tells React to treat the component as a new one, thus triggering a re-render.

Example:

import React, { useState } from 'react';

const ChildComponent = ({ key }) => {
  console.log('Child component rendered');
  return <div>Child Component</div>;
};

const ParentComponent = () => {
  const [key, setKey] = useState(1);

  const updateKey = () => {
    setKey(prevKey => prevKey + 1);
  };

  return (
    <div>
      <ChildComponent key={key} />
      <button onClick={updateKey}>Update Key</button>
    </div>
  );
};

export default ParentComponent;

Detailed Code Walkthrough

In this example, ParentComponent maintains a key state. The ChildComponent receives this key as a prop. Each time the button is clicked, the updateKey function increments the key, forcing ChildComponent to re-render.

Common Use Cases

Resetting Component State: When you need to reset a component's state under certain conditions.
Full Re-render with New Props: Ensuring a component fully re-renders when it receives new props.
Managing Animations: Triggering animations on mount/unmount by changing keys.

Important Considerations

Key Uniqueness: Ensure keys are unique among siblings to avoid unexpected behavior.
Performance: Forcing re-renders by changing keys can be less efficient than updating components in place, so use this technique carefully.

Conclusion

Using the key prop to force re-renders in React can be a powerful tool when used correctly. It provides a way to manage the component lifecycle and updates more precisely. Experiment with this technique to better understand how React handles rendering and component updates.

Why Gatsby is framework of the future

malapashish — Sat, 07 Aug 2021 13:49:09 +0000

As web developers, we are constantly looking for new technologies that are interesting and helpful in our projects. If you are in the web dev community for enough time you have heard about something called Gatsby.
This article will introduce Gatsby and the reasons you should consider using it while making your next project. However, I am trying to make a series where we will try to make a simple application with Gatsby. So Here we go(in Mario voice).

Gatsby is an open-source static site generator that is based on JAMstack. Confused about what is a static generator and what do you mean by JAMstack, don’t worry about it check out these resources Static Generator and JAMstack. So now will see some of the reasons why is it so famous.-

1. The Speed:

One of the things that always worries a web developer while using new technology is that its effect on performance. Here Gatsby comes into the picture. The websites built using Gatsby are 2-3 times faster than websites of similar types of sites. Do not believe me take a look at some of the real-world examples here. The framework under the hood takes care of performance on its own, providing you with an opportunity to focus on more fun things. If you are interested in how Gatsby does this check this.

2. Uses popular and widely used technology:

Gatsby is based on everyone’s favourite framework React. I don’t think we need to introduce React here, if you have heard about Gatsby then there is a chance that you probably heard about React. Gatsby aims to behave like a regular React application and uses its components which you can reuse and share throughout your project.
Gatsby also uses GraphQL to build its data layer. GraphQL lets you query all necessary data from wherever you want: markdown files, databases, Storyblok, traditional CMSs like Drupal, and so on. If you are anything like me and never tried GraphQL before and planning on making regular API calls in components then trust me Gatsby will be a good reason to learn GraphQL. Using GraphQL with Gatsby makes the development easier.

3. Fun learning experience:

One of the hardest things while learning new technology is how much time is required to learn them accurately. However, in Gatsby’s case, it is based on some of the most popular technologies, so you don’t need to learn everything from base. Even if you have never learned technologies like React or GraphQL, Gatsby provides you perfect opportunity to learn and master them. Gatsby also has a well-written tutorial to get you started in no time check it out.

So this was an introduction to Gatsby. I am also learning Gatsby, discovering new things about it every day and so far, I can say that everyone looking to become a good web developer should check out Gatsby.

Typography in CSS

malapashish — Sun, 23 May 2021 13:35:05 +0000

1.The Font Shorthand

With the syntax:

element {
 font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}

You can have all your font-related styles in one declaration with the font shorthand. Simply use the font property, and put your values in the correct order.
For example, to make all p elements bold with a font size of 20px and using Arial as the font family typically you would code it as follows:

p {
 font-weight: bold;
 font-size: 20px;
 font-family: Arial, sans-serif;
}

However with the font shorthand it can be condensed as follows:

p {
 font: bold 20px Arial, sans-serif;
}

Initial value for each of the properties:

font-style: normal;
font-variant: normal;
font-weight: normal;
font-stretch: normal;
font-size: medium;
line-height: normal;
font-family – depends on user agent

2.Quotes

The quotes property is used to customize the opening and closing quotation marks of the <q> tag.

q {
 quotes: "«" "»";
}

3.Font Size

HTML

<div id="element-one">Hello I am some text.</div>
<div id="element-two">Hello I am some smaller text.</div>

CSS

#element-one {
 font-size: 30px;
}
#element-two {
 font-size: 10px;
}

The text inside #element-one will be 30px in size, while the text in #element-two will be 10px in size.

4.Text Direction

div {
 direction: ltr; /* Default, text read read from left-to-right */
}
.ex {
 direction: rtl; /* text read from right-to-left */
}
.horizontal-tb {
 writing-mode: horizontal-tb; /* Default, text read from left-to-right and top-to-bottom. */
}
.vertical-rtl {
 writing-mode: vertical-rl; /* text read from right-to-left and top-to-bottom */
}
.vertical-ltr {
 writing-mode: vertical-rl; /* text read from left-to-right and top to bottom */
}

The direction property is used to change the horizontal text direction of an element.
Syntax: direction: ltr | rtl | initial | inherit;
The writing-mode property changes the alignment of text so it can be read from top-to-bottom or from left-to-right, depending on the language.
Syntax: direction: horizontal-tb | vertical-rl | vertical-lr;

5.Font Stacks

font-family: 'Segoe UI', Tahoma, sans-serif;
The browser will attempt to apply the font face "Segoe UI" to the characters within the elements targeted by the above property. If this font is not available, or the font does not contain a glyph for the required character, the browser will fall back to Tahoma, and, if necessary, any sans-serif font on the user's computer. Note that any font names with more than one word such as "Segoe UI" need to have single or double quotes around them.

6.Text Overflow

The text-overflow property deals with how overflowed content should be signaled to users. In this example, the ellipsis represents clipped text.

.text {
 overflow: hidden;
 text-overflow: ellipsis;
}

Unfortunately, text-overflow: ellipsis only works on a single line of text. There is no way to support ellipsis on the last line in standard CSS, but it can be achieved with non-standard webkit-only implementation of flexboxes.

giveMeEllipsis {
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: N; /* number of lines to show */
 line-height: X; /* fallback */
 max-height: X*N; /* fallback */
}

Resource

7.Text Shadow

To add shadows to text, use the text-shadow property. The syntax is as follows:
text-shadow: horizontal-offset vertical-offset blur color;

Shadow without blur radius

h1 {
 text-shadow: 2px 2px #0000FF;
}

This creates a blue shadow effect around a heading

Shadow with blur radius

To add a blur effect, add an option blur radius argument

h1 {
 text-shadow: 2px 2px 10px #0000FF;
}

Multiple Shadows

To give an element multiple shadows, separate them with commas

h1 {
 text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

8.Text Transform

The text-transform property allows you to change the capitalization of text. Valid values are: uppercase, capitalize, lowercase, initial, inherit, and none

.example1 {
 text-transform: uppercase;
}
.example2 {
 text-transform: capitalize;
}
.example3 {
 text-transform: lowercase;
}

<p class="example1">
 all letters in uppercase <!-- "ALL LETTERS IN UPPERCASE" -->
</p>
<p class="example2">
 all letters in capitalize <!-- "All Letters In Capitalize (Sentence Case)" -->
</p>
<p class="example3">
 all letters in lowercase <!-- "all letters in lowercase" -->
</p>

9.Letter Spacing

h2 {
 /* adds a 1px space horizontally between each letter;
 also known as tracking */
 letter-spacing: 1px;
   }

The letter-spacing property is used to specify the space between the characters in a text.
! letter-spacing also supports negative values:

p {
 letter-spacing: -1px;
}

Resource

10.Text Indent

p {
 text-indent: 50px;
}

The text-indent property specifies how much horizontal space text should be moved before the beginning of the first line of the text content of an element.
Resources:

11.Text Decoration

The text-decoration property is used to set or remove decorations from text

h1 { text-decoration: none; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }

text-decoration can be used in combination with text-decoration-style and text-decoration-color as a shorthand property:

.title { text-decoration: underline dotted blue; }

This is a shorthand version of

.title {
 text-decoration-style: dotted;
 text-decoration-line: underline;
 text-decoration-color: blue;
}

12.Word Spacing

CSS

.normal { word-spacing: normal; }
.narrow { word-spacing: -3px; }
.extensive { word-spacing: 10px; }

HTML

<p>
 <span class="normal">This is an example, showing the effect of "word-spacing".</span><br>
 <span class="narrow">This is an example, showing the effect of "word-spacing".</span><br>
 <span class="extensive">This is an example, showing the effect of "word-spacing".</span><br>
</p>

Resources:

13.Font Variant

CSS

.smallcaps{
 font-variant: small-caps;
}

HTML

<p class="smallcaps">
   Documentation about CSS Fonts
   <br>
   aNd ExAmpLe
</p>

Different centering methods in css

malapashish — Sun, 23 May 2021 11:55:26 +0000

The above article will cover different ways of centering things using CSS.

1.Using `Flexbox`

HTML

<div class="container">
    <img src="car.jpg" />
</div>

CSS

html, body, .container {
 height: 100%;
}
.container {
 display: flex;
 justify-content: center; /* horizontal center */
}
img {
 align-self: center; /* vertical center */
}

2.Using `CSS transform`

CSS transforms are based on the size of the elements so if you don't know how tall or wide your element is, you can position it absolutely 50% from the top and left of a relative container and translate it by 50% left and upwards to center it vertically and horizontally. Keep in mind that with this technique, the element could end being rendered at a non-integer pixel boundary, making it look blurry.

HTML

<div class="container">
 <div class="element"></div>
</div>

CSS

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

3.Using `margin: 0 auto;`

Objects can be centered by using margin: 0 auto; if they are block elements and have a defined width.

HTML

<div class="containerDiv">
 <div id="centeredDiv"></div>
</div>
<div class="containerDiv">
 <p id="centeredParagraph">This is a centered paragraph.</p>
</div>
<div class="containerDiv">
 <img id="centeredImage"
src="https://i.kinja-img.com/gawker-media/image/upload/s--c7Q9b4Eh--/c_scale,fl_progressive,q_80,w_
800/qqyvc3bkpyl3mfhr8all.jpg" />
</div>

CSS

.containerDiv {
 width: 100%;
 height: 100px;
 padding-bottom: 40px;
}
#centeredDiv {
 margin: 0 auto;
 width: 200px;
 height: 100px;
 border: 1px solid #000;
}
#centeredParagraph {
 width: 200px;
 margin: 0 auto;
}
#centeredImage {
 display: block;
 width: 200px;
 margin: 0 auto;
}

4.Using `text-align`

The most common and easiest type of centering is that of lines of text in an element. CSS has the rule text-align:center for this purpose:

HTML

<p>Lorem ipsum</p>

CSS

p {
 text-align: center;
}

This does not work for centering entire block elements. text-align controls only alignment of inline content like text in
its parent block element.

5.Using `position: absolute`

Automatic margins, paired with values of zero for the left and right or top and bottom offsets, will center an absolutely positioned elements within its parent.

HTML

<div class="parent">
 <img class="center" src="http://lorempixel.com/400/200/" />
</div>

CSS

.parent {
 position: relative;
 height: 500px;
}
.center {
 position: absolute;
 margin: auto;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
}

Elements that don't have their own implicit width and height like images do, will need those values defined.

6.Using `calc()`

The calc() function is the part of a new syntax in CSS3 in which you can calculate (mathematically) what size/position your element occupies by using a variety of values like pixels, percentages, etc. Note: Whenever you use this function, always take care of the space between two values calc(100% - 80px).

CSS

.center {
 position: absolute;
 height: 50px;
 width: 50px;
 background: red;
 top: calc(50% - 50px / 2); /* height divided by 2*/
 left: calc(50% - 50px / 2); /* width divided by 2*/
}

HTML

<div class="center"></div>

7.Using `line-height`

You can also use line-height to center vertically a single line of text inside a container :

CSS

div {
 height: 200px;
 line-height: 200px;
}

That's quite ugly, but can be useful inside an element. The line-height property works only when the text to be centered spans a single line. If the text wraps into multiple lines, the resulting output won't be centered.

8.Vertical align anything with 3 lines of code

Use these 3 lines to vertical align practically everything. Just make sure the div/image you apply the code to has a parent with a height.

CSS

div.vertical {
 position: relative;
 top: 50%;
 transform: translateY(-50%);
}

HTML

<div class="vertical">Vertical aligned text!</div>

9.Centering in relation to another item

We will see how to center content based on the height of a near element.

HTML

<div class="content">
 <div class="position-container">
 <div class="thumb">
 <img src="http://lorempixel.com/400/200/">
 </div>
 <div class="details">
 <p class="banner-title">text 1</p>
 <p class="banner-text">content content content content content content content content
content content content content content content</p>
 <button class="btn">button</button>
 </div>
 </div>
</div>

CSS

.content * {
 box-sizing: border-box;
}
.content .position-container {
 display: table;
}
.content .details {
 display: table-cell;
 vertical-align: middle;
 width: 33.333333%;
 padding: 30px;
 font-size: 17px;
 text-align: center;
}
.content .thumb {
 width: 100%;
}
.content .thumb img {
 width: 100%;
}

The main points are the 3 .thumb, .details and .position-container containers:

The .position-container must have display: table.
The .details must have the real width set width: .... and display: table-cell, vertical-align: middle.
The .thumb must have width: 100% if you want that it will take all the remaining space and it will be influenced by the .details width.
The image (if you have an image) inside .thumb should have width: 100%, but it is not necessary if you have correct proportions.

10.Ghost element technique (Michał Czernow's hack)

This technique works even when the container's dimensions are unknown.
Set up a "ghost" element inside the container to be centered that is 100% height, then use vertical-align: middle on both that and the element to be centered.

CSS

/* This parent can be any width and height */
.block {
 text-align: center;
 /* May want to do this if there is risk the container may be narrower than the element inside */
 white-space: nowrap;
}
/* The ghost element */
.block:before {
 content: '';
 display: inline-block;
 height: 100%;
 vertical-align: middle;
 /* There is a gap between ghost element and .centered,
 caused by space character rendered. Could be eliminated by
 nudging .centered (nudge distance depends on font family),
 or by zeroing font-size in .parent and resetting it back
 (probably to 1rem) in .centered. */
 margin-right: -0.25em;
}
/* The element to be centered, can also be of any width and height */
.centered {
 display: inline-block;
 vertical-align: middle;
 width: 300px;
 white-space: normal; /* Resetting inherited nowrap behavior */
}

HTML

<div class="block">
 <div class="centered"></div>
</div>

11.Centering vertically and horizontally without worrying about height or width

The following technique allows you to add your content to an HTML element and center it both horizontally and vertically without worrying about its height or width.

The outer container

should have display: table;

The inner container

should have display: table-cell;
should have vertical-align: middle;
should have text-align: center;

The content box

should have display: inline-block;
should re-adjust the horizontal text-alignment to eg. text-align: left; or text-align: right;, unless you want text to be centered

HTML

<div class="outer-container">
 <div class="inner-container">
 <div class="centered-content">
 You can put anything here!
 </div>
 </div>
</div>

CSS

body {
 margin : 0;
}
.outer-container {
 position : absolute;
 display: table;
 width: 100%; /* This could be ANY width */
 height: 100%; /* This could be ANY height */
 background: #ccc;
}
.inner-container {
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}
.centered-content {
 display: inline-block;
 text-align: left;
 background: #fff;
 padding: 20px;
 border: 1px solid #000;
}

12.Vertically align an image inside div

HTML

<div class="wrap">
 <img src="http://lorempixel.com/400/200/" />
</div>

CSS

.wrap {
 height: 50px;/* max image height */
 width: 100px;
 border: 1px solid blue;
 text-align: center;
}
.wrap:before {
 content:"";
 display: inline-block;
 height: 100%;
 vertical-align: middle;
 width: 1px;
}
img {
 vertical-align: middle;
}

13.Centering with fixed size

If the size of your content is fixed, you can use absolute positioning to 50% with margin that reduces half of your content's width and height:

HTML

<div class="center">
 Center vertically and horizontally
</div>

CSS

.center {
 position: absolute;
 background: #ccc;
 left: 50%;
 width: 150px;
 margin-left: -75px; /* width * -0.5 */
 top: 50%;
 height: 200px;
 margin-top: -100px; /* height * -0.5 */
}

14.Vertically align dynamic height elements

HTML

<div class="vcenter--container">
 <div class="vcenter--helper">
 <div class="vcenter--content">
 <!--stuff-->
 </div>
 </div>
</div>

CSS

.vcenter--container {
 display: table;
 height: 100%;
 position: absolute;
 overflow: hidden;
 width: 100%;
}
.vcenter--helper {
 display: table-cell;
 vertical-align: middle;
}
.vcenter--content {
 margin: 0 auto;
 width: 200px;
}

15.Horizontal and Vertical centering using table layout

One could easily center a child element using table display property.

HTML

<div class="wrapper">
 <div class="parent">
 <div class="child"></div>
 </div>
</div>

CSS

.wrapper {
 display: table;
 vertical-align: center;
 width: 200px;
 height: 200px;
 background-color: #9e9e9e;
}
.parent {
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}
.child {
 display: inline-block;
 vertical-align: middle;
 text-align: center;
 width: 100px;
 height: 100px;
 background-color: teal;
}

What is Currying?

malapashish — Sun, 23 May 2021 07:54:44 +0000

If you are present in the world of Javascript long enough then you would have come across a term known as ‘Currying’. Although this is an advanced technique understanding it is not that hard. We can define Currying as, a technique of evaluating function with multiple arguments, into sequence of functions with single argument. Confused ?. Good because while learning new concepts in programming confusion is your best friend.

In other words, when a function, instead of taking all arguments at one time, takes the first one and returns a new function that takes the second one and returns a new function which takes the third one, and so forth, until the last function returns the data that you want. In short, currying doesn't call a function , it just transforms it.

We will look at the syntex first

function Myfunction(a) {
        return (b) => {
           return (c) => {
             return a * b * c
             }
            }
         }

Example

We’ll create a helper function curry(f) that performs currying for a two-argument f. In other words, curry(f) for two-argument f(a, b) translates it into a function that runs as f(a)(b).

function curry(f) { // curry(f) does the currying transform
  return function(a) {
    return function(b) {
      return f(a, b);
    };
  };
}

// usage
function sum(a, b) {
  return a + b;
}

let curriedSum = curry(sum);

alert( curriedSum(1)(2) ); // 3

More advanced implementations of currying, such as _.curry from lodash library, return a wrapper that allows a function to be called both normally and partially:

function sum(a, b) {
  return a + b;
}

let curriedSum = _.curry(sum); // using _.curry from lodash library

alert( curriedSum(1, 2) ); // 3, still callable normally
alert( curriedSum(1)(2) ); // 3, called partially

Advanced curry implementation

Your curried function may look something like this:

function checkStock(stockID){ 
   //some check code 
   if(err){throw err;} 

   return (warehouseID) => { 
      //some check code 
      if(err){throw err;}
      return(stockDeduct)=> { 
        //some check code         
        if(err){throw err;}
         return stockID 
                + ' from ' + warehouseID
                + ' is reduced by ' + stockDeduct;      
      }
   }
}

let orderItem298 = checkStock('FN9382')('SOUTH')(3); // FN9382 from SOUTH is reduced by 3

Why you should learn about Higher Order Functions

malapashish — Thu, 15 Apr 2021 12:39:09 +0000

Introduction:

In functional programming languages like Javascript functions are values that means we can pass it around like others values like string, num. We can also assign it to a variable. Confused? Don’t worry here is an example

const square = function(x){
    return Math.pow(x, 2);
}

const findSquare = square;

findSquare(3); //will output 9

In the above example we have passed an anonymous function to the square variable then assign it to findSquare. Just like the above instance we can also pass function as an input to other functions. Now here Higher Order Functions comes into the picture.

Higher Order Functions:

Higher order function is the function which accepts other functions as an input. Looks complicated right? . Don’t worry it’s really simple. We will look at one of the most famous and simple higher order functions .filter(). First we will take a sample array named cars to perform the operation. And then we will first perform the filtering operation using for() loop and then .filter() to see how easy is to perform the operation with more easily readable code.

const cars = [
    {mode: 'NISSAN VERSA' , type: 'SEDAN'},
    {mode: 'SUBARU OUTBACK' , type: 'STATION WAGON'},
    {mode: 'FORD MUSTANG' , type: 'COUPE'},
    {mode: 'AUDI A4 ALLROAD' , type: 'STATION WAGON'},
    {mode: 'KIA RIO' , type: 'SEDAN'},
    {mode: 'AUDI A7' , type: 'HATCHBACK'},
    {mode: 'TOYOTA AVALON' , type: 'SEDAN'},
    {mode: 'AUDI A5' , type: 'COUPE'},
    {mode: 'HONDA ACCORD' , type: 'SEDAN'},
    {mode: 'KIA STINGER' , type: 'HATCHBACK'}
]

Now consider a case where we only want data related to type SEDAN. First we will see how to do this operation using for().

const SEDAN = [];
for(let i = 0 ; i < cars.length ; i++){
    if(cars[i].type === 'SEDAN'){
        SEDAN.push(cars[i]);
    }
}
//will return [{mode: "NISSAN VERSA", type: "SEDAN"},{mode: "KIA RIO", type: "SEDAN"},{mode: "TOYOTA AVALON", type: "SEDAN"},{mode: "TOYOTA AVALON", type: "SEDAN"}]

Now let’s see using .filter() method

const SEDAN = cars.filter((car) => {
    return car.type === "SEDAN"
})

The difference between both methods is not drastic but there is some difference. The code written using .filter() is more readable.Also the .fiter() does not change the original array, it returns a new array which contains the values which have satisfied the filter condition. This is an important part if you are learning React Js as states in react are immutable higher order functions like .filter() are preferred.

Advantages

It is much easier to understand the program and the intention of the programmer is clearly expressed in the code.
Functions which take functions as arguments are much easier to re-use than other functions.

Forem: malapashish

Mastering React Re-Renders : The Key Prop Hack You Need to Know

What is the Key Prop?

Why Use Keys to Force Re-renders?

Example:

Detailed Code Walkthrough

Common Use Cases

Important Considerations

Conclusion

Why Gatsby is framework of the future

1. The Speed:

2. Uses popular and widely used technology:

3. Fun learning experience:

Typography in CSS

1.The Font Shorthand

2.Quotes

3.Font Size

HTML

CSS

4.Text Direction

5.Font Stacks

6.Text Overflow

7.Text Shadow

Shadow without blur radius

Shadow with blur radius

Multiple Shadows

8.Text Transform

9.Letter Spacing

10.Text Indent

11.Text Decoration

12.Word Spacing

CSS

HTML

13.Font Variant

CSS

HTML

Different centering methods in css

1.Using Flexbox

HTML

CSS

2.Using CSS transform

HTML

CSS

3.Using margin: 0 auto;

HTML

CSS

4.Using text-align

HTML

CSS

5.Using position: absolute

HTML

CSS

6.Using calc()

CSS

HTML

7.Using line-height

CSS

8.Vertical align anything with 3 lines of code

CSS

HTML

9.Centering in relation to another item

HTML

CSS

10.Ghost element technique (Michał Czernow's hack)

CSS

HTML

11.Centering vertically and horizontally without worrying about height or width

The outer container

The inner container

The content box

HTML

CSS

12.Vertically align an image inside div

HTML

CSS

13.Centering with fixed size

HTML

CSS

14.Vertically align dynamic height elements

HTML

1.Using `Flexbox`

2.Using `CSS transform`

3.Using `margin: 0 auto;`

4.Using `text-align`

5.Using `position: absolute`

6.Using `calc()`

7.Using `line-height`