How to vertically center html

For front-end developers, horizontal centering is relatively simple, but vertical centering is a more difficult problem. In this article, we will discuss how to vertically center elements in HTML.

In general, there are many ways to vertically center an HTML element. Below, we explore a few of these methods.

1. Use Flexbox

Flexbox (flexible box layout) is one of the latest layout methods of CSS3 and is an extremely convenient centering method. The main idea of ​​Flexbox is to create a flexible box in the container, and then control the properties of the flexible box to achieve horizontal and vertical centering. Let's take a look at how to use Flexbox to achieve vertical centering:

HTML code:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

CSS code:

.container {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.child {
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

In this example, we first set up a height, then set the container's display mode to Flexbox, and use the justify-content and align-items properties to center the element vertically and horizontally. It’s worth noting that this method only works for simple vertical centering.

2. Use absolute positioning

Absolute positioning is a common method. Using absolute positioning, you can center an element vertically relative to its parent element. The specific implementation is as follows:

HTML code:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

CSS code:

.container {
    position: relative;
    height: 300px;
}
.child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

In this example, we first set position: relative to the container, and then set the position: relative for the child elements Set position: absolute, and set the top property to 50%. This way the child element is vertically centered. However, there will be some extra whitespace at the top of this element. To eliminate this white space, we use transform: translateY(-50%), which translates it up by half its height so that the element is exactly vertically centered.

3. Use table-cell

Using table-cell is equivalent to converting HTML elements into table elements. table-cell can achieve simple horizontal and vertical centering, but it is relatively cumbersome. Let's take a look at the specific implementation method:

HTML code:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

CSS code:

.container {
    display: table;
    height: 300px;
    width: 100%;
    text-align: center;
}
.child {
    display: table-cell;
    vertical-align: middle;
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

In this example, we first set the display mode of the container to table , then set the height and width of the container to the size we want, and set text-align to center (centering it horizontally). Next, we set the display mode of the child element to table-cell and achieve vertical centering through the vertical-align attribute.

4. Use grid grid layout

CSS Grid Layout is a powerful layout method that allows us to quickly and effectively create grid-type layouts, including horizontal and vertical centering. The specific implementation is as follows:

HTML code:

<div class="container">
    <div class="child">我是要居中的元素</div>
</div>

CSS code:

.container {
    display: grid;
    height: 300px;
    place-items: center;
}
.child {
    width: 200px;
    height: 100px;
    background-color: #f8f8f8;
}

In this example, we first use display: grid to set the display mode of the container to grid Grid layout. We then use the place-items property to center it horizontally and vertically. Since this method is still relatively new, it is not yet good enough in terms of browser compatibility.

Summary

In this article, we explored several common ways to achieve vertical centering in HTML. Each of these methods has advantages and disadvantages, and you can choose the appropriate method according to the actual situation and needs. If it is just simple vertical centering, then using Flexbox or absolute positioning is relatively simple and effective. For more complex layouts, you can use CSS Grid Layout.

The above is the detailed content of How to vertically center html. For more information, please follow other related articles on the PHP Chinese website!