Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 19, 2022 03:07 pm GMT

CSS Interview Question: Center HTML Element (3 Approaches)

You get asked a question or is challenged to write code to

Center a div vertically and horizontally OR How to perfectly center an element in a browser?

How would you answer? Below are three possible ways to do it. My recommendation all the way below. Given HTML markup that looks like below:

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

Approach #1: CSS Translate/Transform
This is an approach that have a better browser support than both CSS Flexbox and Grid. Code may look like below.

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

CSS Translate/Transform Browser Support Image

Codepen: https://codepen.io/angelo_jin/pen/popONyX

Note: All implementation will look like below

Vertically and Horizontally Centered HTML Element

Approach #2: CSS Flexbox
This solution have a better browser support than css grid and ideal for those browsers can support the feature. It is great for creating 1 dimension layout which aims at providing a more efficient way to align and distribute space among items in a container. Can even center when their size is unknown and/or dynamic.

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

Codepen: https://codepen.io/angelo_jin/pen/QWaVGGP

CSS Flexbox Browser Support Image

Approach #3: CSS Grid
This ruleset is ideal because we are not on the 90's anymore, few lines of style we have to add that completely changes the way we design user interface. CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

If you are going to use this on your interview, mention that you would use this solution if browser can support it. This would show that you are paying attention with the latest and greatest css specs and is not tied up with the old way of doing things.

// CSS Grid.parent {  display: grid;  place-items: center;}

Codepen: https://codepen.io/angelo_jin/pen/qBpMqRr

CSS Grid Browser Support Image

Below is for medium for those who like video format:

Codepen Center Element Collection: https://codepen.io/collection/MgJxRk
(Great idea to bookmark for future use)

A great front-end engineer focus his attention equally on CSS and JS, be well-rounded, and doesn't concentrate on one technology. For my recommendation on this question, I would use CSS Grid if browser is capable of supporting. If not, resort to CSS Flexbox then, CSS Translate would be the last choice.


Original Link: https://dev.to/frontendengineer/css-interview-question-center-html-element-3-approaches-58h5

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To