Center a div or element in many ways using CSS

Tonmoy — Wed, 19 Oct 2022 11:25:40 +0000

As a beginner, Centering things is one of the most difficult aspects of CSS. You can center a div in a few different ways in CSS. We're trying to understand how to do such thing in easy way.
We'll see how can center a div or element, Horizontally and Vertically.

Let's get started!

Firstly, We consider two elements or containers or div, where one is parent div or container and the another one is child div or container as the below of html code -

Here, You must need to take any fixed height to the parent div element. Otherwise, you can't get proper layouts.

Using CSS Flexbox

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. The reason you'd choose to use flexbox is because you want to lay a collection of items out in one direction/dimension.
This allows elements to align and distribute space within a container. Using flexible widths and heights, elements can be aligned to fill a space or distribute space between elements, which makes it a great tool to use for responsive design systems.

You can use flexbox for a few main things as scaling, vertically and horizontally aligning, and re-ordering elements within a container. These are best used on page components within a parent element.

1. Flexbox on parent container
This technique is one of my favorite of all. Here, all the CSS properties are defined under the parent container.

We define the parent div with display: flex property along with justify-content (for horizontal placement) and align-items (for vertical placement) center. These properties come with Flex specifications.

2. Using Flexbox and margin property
The flex property sets the flexible length on flexible items.

So, We define the parent div with display: flex property. Besides, we need to add the child div with margin: auto property.
The margin property to auto used to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

3. Using Flexbox and align-self property
Again, We define the parent div with display: flex property along with justify-content: center (to justify items along the center of the parent div). Furthermore, we have to add align-self: center property to the child div.
The align-self CSS property specifies the alignment for the selected item inside the flexible container. Also, It overrides a flex item's align-items value.

Using CSS Grid

CSS Grid is a powerful tool that allows for two-dimensional layouts for columns and rows to be created responsive items on the web. The Grid items are arranged in columns, and you can easily position rows without having to mess around with the HTML code.

CSS Grid is very flexible and responsive. It makes it easy to create two-dimensional layouts. The features of CSS Grid Layout are Flexible Track Sizes, Item Placement, Alignment Controls and so on. CSS Grid Layout helps us build a more complex layouts using both columns and rows.

4. Using Grid on parent container
We define the parent div with display: grid property along with justify-content (for horizontal placement) and align-items (for vertical placement) center.

Grid layout enables to align elements into columns and rows. To justify items along the center of the parent div in vertically and horizontally, we use align-items and justify-content properties to center value of a grid layout.

5. Using Grid and place-items property
Again, We define the parent div with display: grid property for grid layout. And place-items: center for vertical placement in center.
The place-items property in CSS Grid is shorthand for the align-items and justify-items properties, combining them into a single declaration.

6. Using Grid properties on parent and child containers
Similarly, we define display: grid to the parent div element here. Also, Add align-self and justify-self to center in the child div element.
The align-self CSS property overrides a grid item's align-items value. In Grid, it aligns (vertical alignment) the item inside the grid area.
Additionally, The CSS justify-self property sets the way a box is justified (horizontal alignment) inside its alignment container along the appropriate axis.

Using CSS Position

By default, the position property for all HTML elements in CSS is set to static. This means that if you don't specify any other position value or if the position property is not declared explicitly, it'll be static.
This property takes in five values: static, relative, absolute, fixed, and sticky .

7. Using CSS Position and Transform property
We use positioning and the transform property to vertically and horizontally center the child div or element.
We define position: relative to the parent div. Also, added position: absolute , top: 50% , left: 50% and transform: translate(-50%, -50%) to the child div.
In the parent div, we use position to relative because of positioning the child div into absolute position as its inner element.
In the child div, we use position to absolute for taking out of the regular flow of the element and giving it to a custom position. Top and left to 50%, it will leave 50% free space from the top left side of the parent div. And using the transform property, translate(x, y) , translateX and translateY to -50%, means the child element will take the backward space of its 50% width to vertically and horizontally center to the parent div.

SSH - A web developer should know...

Tonmoy — Fri, 29 Jul 2022 12:59:00 +0000

SSH stands for secure shell protocol.

Just like modern web browsers uses https/ http protocol to communicate with servers,
SSH allows to establish secure communication between systems or two computers, remotely access another computer, clone or pull/push files from GitHub servers and much more.

Let's deep dive more and see how it works?

SSH breaks data into series of package and encrypts the data before transmitting.

The SSH command consists of 3 distinct parts for Mac and Linux users -
ssh {user}@{host}

Here, {user} represents the account you want to access like as your system root user.
{host} refers to the computer or system you want to access. It can be an IP Address (e.g. 244.235.23.19) or a domain name (e.g. www.xyzdomain.com).

Understanding three encryption techniques of SSH

Symmetrical encryption
Asymmetrical encryption
Hashing.

Symmetrical encryption - It uses two separated keys to communicate between the systems.
Asymmetrical encryption - It uses public keys, private integrated keys for communicating between the systems
and also uses key exchange algorithm - Difiie Hellman key exchange algorithm.
Hashing - Hashing is a technique of transforming a key or string to another value to enhance the security.

What a web developer has to do with it??

Every developer works on any cloud platform and uses tools like Github to host their code. When we are asked to Fork or Clone a Github repository to our account or our local drive, Github comes with two options i.e. HTTPS or SSH.

Here, we can create an SSH key for our system using ssh-key-gen and add it to our Github account.

Print to console - console.log() and more

Tonmoy — Thu, 28 Jul 2022 05:53:16 +0000

Logging or printing messages to the console is a very basic way to diagnose and troubleshoot minor issues or bugs in your code.

In this article, I'll show you how to print to the console in JS, as well as all of the things you didn't know console could do.

To clear the console
console.clear();
Print string, number or boolean values in console
console.log('Hi there'); console.log(10); console.log(false);
Print the value of a variable

let say = 'Hello';
console.log(say);

Print an array to console

let quote = ['Keep','it','simple'];
console.log(quote);

Print an object to console using log and table method