January 30, 2023

5 ways to align HTML element horizontally and vertically

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, you can use top: 50%/ left: 50% in combination with translateX(-50%) translateY(-50%) to dynamically center an element horizontally / vertically:



.container {

    position: absolute;
    
    top: 50%;
    
    left: 50%;
    
    transform: translateX(-50%) translateY(-50%);
    
}


An example can be viewed here, and here you can see the full-screen version.

Method 2:

In supported browsers , 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 ) so that this trick works in more browsers:



html, body, .container {

    height: 100%;
    
}

.container {

    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
}


Here's an example and a full screen version .

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 :



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 and here .

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:



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 and here . 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 :



.parent {

    height: 200px;
    
    width: 400px;
    
    text-align: center;
    
}

.parent > .child {

    line-height: 200px;
    
}



An example can be seen here.


Keep reading😊

Text Link
marketing
Web development
Web design
January 25, 2023

Why marketing is important for a good website

Read more
coding tips
Web development
back-end
front-end
Mobile design
January 26, 2023

The semicolon in JavaScript / TypeScript: pros and cons

Read more