Forem: Tjaša

8 ways to center elements with CSS

Tjaša — Mon, 17 May 2021 06:15:24 +0000

Centering elements in CSS sometimes causes a headache, even to experienced developers. There are many different situations and many different solutions. Sometimes it is best to choose one over another but other times it is a matter of personal preference. To make the right decision, we need to know what CSS has to offer and the pros and cons of each given option. In this post, I have gathered 8 of them so let’s look at them in more detail.

1. Flex

This one is in my opinion the most simple solution. You only need to add three properties to a parent element and the child will be centered inside of it. The align-items property aligns the child vertically, while the justify-content aligns it horizontally.

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

You can use this solution in almost every situation. Downside? IE10 and bellow do not support justify-content and align-items properties.

In the past three years, I never had to support IE10 or lower so chances are you do not need to worry about it as well. This makes flex solution a very good fit for the job.

Vertical	Horizontal	Known heights	Browser support
✅	✅	no	IE11+

2. Grid

The grid solution is very similar to the flex one. Even the code is almost the same.

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

It behaves the same as the flex solution, except for the browser coverage. If justify-content and align-items worked in IE11 for flex, they do not work for the grid display.

This might be a good solution if you do not have to cover IE at all and if you prefer using a grid over flex.

Vertical	Horizontal	Known heights	Browser support
✅	✅	no	IE not supported

3. Position

If the parent has a set height or min height, then using position might be a good solution. A child with the position property set to absolute will be taken out of the flow. This means that the child's height will not affect the parent's height. Knowing that it is not wise to use this approach to align a box with text that can have a different length. This code will align a child horizontally and vertically:

.parent {
  position: relative;
  /* add some height to the parent element, for example: */
  min-height: 200px;
}

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

If you only wish to align an element vertically use this style for the child instead:

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

or this one to align it horizontaly:

.child {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

All used properties for this solution are very well-supported on all browsers. Note that the transform property is not supported by IE8 and lower but you most likely don't need to worry about it.

Vertical	Horizontal	Known heights	Browser support
✅	✅	no	IE9+

4. Margin

Using a margin to horizontally align a block element is also very popular. It is often used to align layout elements like containers, but it is a good fit for any block element. The code is very simple:

.child {
  margin: 0 auto;
}

This approach will allow you to align an element horizontally. To also align it vertically you can use some other solution, like padding for example.

Vertical	Horizontal	Known heights	Browser support
✅	❌	no	very good

5. Padding

You can use padding to center an element vertically and horizontally. Although very simple, padding is rarely a fit solution to center elements. The reason for it is that it relies on fixed heights of child and parent which are rarely given. To center an element with padding you need to divide equal padding value to all sites of the element:

.parent {
  height: 300px;
  width: 400px;
}

.child {
  height: 50px;
  padding: calc((300px - 50px) / 2) calc((400px - 50px) /2);
}

The sum of height and vertical padding determines the child's vertical position. The child is centered if the sum is equal to the parent's height.

.parent {
  height: 300px;
}

.child {
  height: 50px;
  padding: calc((300px - 50px) / 2) 0;
}

For the horizontal position, the same applies. If the sum is equal to the parent's width, the child is centered.

.parent {
  width: 400px;
}

.child {
  height: 50px;
  padding: 0 calc((400px - 50px) / 2);
}

Vertical	Horizontal	Known heights	Browser support
✅	✅	yes	very good

6. Text align

The text-align property can be used to align any inline element. This solution is very good at aligning items like text, images, buttons, and links. Many of them have a display set to inline-block by default but you can also change the display property.

.parent {
  text-align: center;
}

.child {
  display: inline-block;
}

It is a very simple solution but it will only allow you to align the element horizontally. To align it vertically, a good pair would be to use the vertical-align solution.

Vertical	Horizontal	Known heights	Browser support
❌	✅	no	very good

7. Vertical align

The vertical-align property is the one that I struggled to understand the most. It controls the alignment of elements that are next to each other in one line. The elements need to have an inline or inline-block display for it to work. The use case for this solution would be to align icons with text.

.parent > .child {
  display: inline-block;
  vertical-align: middle;
}

This will only align elements along with the line-height of the highest element. If you want to vertically align the element relative to the parent's height, you can do it like this:

.parent {
  display: table-cell;
  vertical-align: middle;
}

.child {
  display: inline-block;
}

As the property's name suggests, it only allows you to center elements vertically. You can use text-align property on the parent to center them horizontally as well.

Vertical	Horizontal	Known heights	Browser support
✅	❌	no	very good

8. Line height

Last but not least, you can also align an element with the line-height property. To do that a child needs to be an inline or inline-block element. The element is always vertically centered inside of its line-height. That means that when the line height is as high as the parent, the element is vertically centered inside of it.

.parent {
  height: 100px;
}

.child {
  display: inline-block;
  line-height: 100px;
}

Line height allows you to only center the element vertically. To center it horizontally you can use the text-align solution. The best use case for that solution are elements like icons, buttons, or links. Because you are messing up with the line height, use it on elements that will always stay in one line.

Vertical	Horizontal	Known heights	Browser support
✅	❌	yes	very good

Summary

As we can see, there are many ways in which you can center an element and I am sure there are others as well. The flex and position solutions are my go-to options although I use others as well sometimes. Do you have a go-to solution? Let me know!

Super simple imports with Webpack resolve

Tjaša — Sat, 08 May 2021 11:16:12 +0000

Modules were, without a dought, one of the best improvements that came with ES6. When combined with Webpack, it allows us to write code in a more developer-friendly way. But file referencing when importing can sometimes become repetitive, error-prone, and hard to look at. Luckily Webpack has us covered with the right solution that is super easy to configure.

Webpack resolve

Resolve is a Webpack library that helps locate imported modules. To configure it, add the code snippet below to the config file.

webpack.config.js

module.exports = {
  resolve: {
    // configuration options
  },
};

Resolve library allows us to resolve imports in two ways: with modules or alias.

Modules

Modules resolve imports by searching for them in the specified directories. Often this is used to resolve node modules.

webpack.config.js

resolve: {
  modules: ['node_modules']
}

This configuration allows us to replace this:

import Module from '../../../../node_modules/module';

with this:

import Module from 'module';

Using resolve.modules, this is all you have to do to make imports work since it will not cause issues with other config files.

Alias

Alias resolves imports by replacing the original path with the custom one.

webpack.config.js

resolve: {
  alias: {
    @components: path.resolve(__dirname, 'components/'),
    @partials: path.resolve(__dirname, 'partials/'),
  },
}

This allows us to change this:

import Component from '../../../../components/component';
import Part from '../../../../partislas/part';

to this:

import Component from '@components/component';
import Part from '@partials/part';

Note that __dirname points to the location of the webpack.config.js file.

ESLint adjustment

Using an alias you might get an ESLint error saying the path can’t be resolved. To fix that you can use eslint-import-resolver-webpack.

To configure it you can add this line of code to the .eslintrc.yml file:

settings:
  import/resolver: webpack

This setting will work if a webpack.config.js is in the same directory as the eslintrc.yml file. Otherwise, see other settings options.

Summary

Configuring Webpack can be overwhelming with all the available options but luckily, this library is very simple to understand and configure. It helped me to write cleaner imports, and I am sure you will find it as useful as I have.