5 ways to align HTML element horizontally and vertically
Published: 2021-04-19 18:51:46


Anyone who works with HTML / CSS sooner or later faces the problem of vertical and horizontal alignment of an element. So that you don't googling again and find many different options, I have collected a few of the most popular here.

### Method 1

In [supported browsers,](https://caniuse.com/#feat=transforms2d) you can use `top: 50%`/ `left: 50%` in combination with `translateX(-50%) translateY(-50%)` to dynamically center an element horizontally / vertically:

```css
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}
```

An example can be viewed [here](https://jsfiddle.net/B3ns44d/aepb4sk0/), and [here](https://jsfiddle.net/B3ns44d/aepb4sk0/show) you can see the full-screen version.

### Method 2

In [supported browsers](https://caniuse.com/#feat=flexbox) , you can also set the property to a `display` value `flex`and use `align-items: center` `justify-content: center` for vertical and horizontal centering, respectively. Most importantly, do not forget to add vendor prefixes (as in the [example](https://jsfiddle.net/B3ns44d/t61v5bxm/) ) so that this trick works in more browsers:

```css
html, body, .container {
    height: 100%;
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
}
```

Here's [an example](https://jsfiddle.net/B3ns44d/L8embqno/) and a [full screen version](https://jsfiddle.net/B3ns44d/L8embqno/show) .

### Method 3

In some cases, you will need to make sure the height of the `html`/ element `body` is 100%.

To set the vertical alignment properties `width` and `height` the parent value `100%`and add `display: table`. In the child, change the value `display` to `table-cell` and add `vertical-align: middle`.

For horizontal alignment of text and other inline elements, you can either use `text-align: center`, or `margin: 0 auto` if you are dealing with a block element. This should work in [most browsers](https://caniuse.com/#feat=css-table) :

```css
html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}
```

Examples are available [here](https://jsfiddle.net/B3ns44d/0wm4np35/) and [here](https://jsfiddle.net/B3ns44d/0wm4np35/show/) .

### Method 4

This assumes that the height of the text is known in advance. In this case, for example `18px`. Now you just need to assign a `position` value to the element's property `absolute` and move it from above `50%`relative to the parent element. Finally, the property `margin-top` needs to be set to a negative value equal to half the element's height:

```css
html, body, .container {
    height: 100%;
}
.container {
    position: relative;
    text-align: center;
}
.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}
```

For examples [here](https://jsfiddle.net/B3ns44d/91m7koyu/) and [here](https://jsfiddle.net/B3ns44d/91m7koyu/show) . This option should work in all supported browsers.

### Method 5

In some cases, the parent element has a fixed height. For vertical alignment, you just need to set the `line-height `child's property to the height of the parent. While this will work in some cases, you shouldn't use it this way, as a few lines of text will [ruin everything](https://jsfiddle.net/6rvdxbt9/) :

```css
.parent {
    height: 200px;
    width: 400px;
    text-align: center;
}
.parent > .child {
    line-height: 200px;
}
```

An example can be seen [here](https://jsfiddle.net/B3ns44d/27ya39dc/).