Vertical Centering

First, set the height of <html> and <body> to 100% (to demonstrate the effect of the parent element with undefined width and height) and clear the default styles of <body>.

html,body{
        margin: 0;
        height: 100%;
    }

Vertical centering can be roughly divided into two categories: parent element with defined width and height, and parent element with undefined width and height. Set the styles for both categories and the child container.

.set-parent,.dy-parent{
        width: 300px;
        height: 200px;
        background: #eee;
        margin: 10px 0;
    }
    .child{
        width: 20px;
        height: 10px;
        background: #fff;
    }
    .dy-parent{ 
        width: 30%;
        height: 20%;
    }

Parent element with defined width and height: position + margin

Use margin: auto to horizontally center the child container. Set the child container to relative position to offset it by 50% without removing it from the document flow. Since the child container has a certain width and height, it will push it down. Use margin to offset it upwards.
If the child container is positioned absolutely, the parent container should be set to relative position. Otherwise, it will be positioned relative to the first parent element outside of the static position. In this example, it will be positioned relative to the browser, and margin: auto cannot be used to horizontally center it.

<!-- Parent element with defined width and height: position + margin -->
    <div class="set-parent" >
        <div class="child" style="position: relative;top: 50%;margin: auto;margin-top: -5px;"></div>
    </div>

Parent element with defined width and height: position + transform

The principle is the same as position + margin. The CSS3 transform property allows the div to be vertically translated by 50% of its own height.

<!-- Parent element with defined width and height: position + transform -->
    <div class="set-parent" >
        <div class="child" style="position: relative;top: 50%;margin: auto;transform: translateY(-50%);"></div>
    </div>

Parent element with defined width and height: position + calc

CSS3 provides the calc function, which allows for dynamic calculations.

<div class="set-parent" >
        <div class="child" style="position: relative;top: calc(50% - 5px);left: calc(50% - 10px);"></div>
    </div>

Parent element with undefined width and height: flex

flex layout can be considered a layout wizard, extremely powerful, and most modern browsers are compatible with flex layout.

<div class="dy-parent" style="display: flex;justify-content: center;align-items: center;">
        <div class="child" ></div>
    </div>

Parent element with variable width and height using grid layout

The grid layout divides the webpage into grids, allowing for various layouts by combining different grids. The grid layout is similar to the flex layout in that it can specify the position of multiple items within a container. However, there are significant differences between them. The flex layout is a line-based layout that can only specify the position of "items" along the axis, and can be considered as a one-dimensional layout. On the other hand, the grid layout divides the container into "rows" and "columns", creating cells, and then specifies the cell in which the "items" are located, making it a two-dimensional layout. It can be said that the grid layout is more powerful than the flex layout.

<div class="dy-parent" style="display: grid;justify-content: center;align-content: center;">
        <div class="child" ></div>
    </div>

Parent element with variable width and height using table layout

The table layout has the vertical-align property to set the vertical alignment.

<div class="dy-parent" style="display: table;">
        <div style="display: table-cell;vertical-align: middle;">
            <div class="child" style="margin: auto;" ></div>
        </div>
    </div>

Example

<!DOCTYPE html>
<html>
<head>
    <title>Vertical Centering</title>
    <meta charset="utf-8">
</head>
<body>

    <!-- Parent element with fixed width and height using position and margin -->
    <div class="set-parent" >
        <div class="child" style="position: relative;top: 50%;margin: auto;margin-top: -5px;"></div>
    </div>

    <!-- Parent element with fixed width and height using position and transform -->
    <div class="set-parent" >
        <div class="child" style="position: relative;top: 50%;margin: auto;transform: translateY(-50%);"></div>
    </div>

    <!-- Parent element with fixed width and height using position and calc -->
    <div class="set-parent" >
        <div class="child" style="position: relative;top: calc(50% - 5px);left: calc(50% - 10px);"></div>
    </div>

    <!-- Parent element with variable width and height using flex layout -->
    <div class="dy-parent" style="display: flex;justify-content: center;align-items: center;">
        <div class="child" ></div>
    </div>

    <!-- Parent element with variable width and height using grid layout -->
    <div class="dy-parent" style="display: grid;justify-content: center;align-content: center;">
        <div class="child" ></div>
    </div>

```html
<!-- Parent element with variable width and height using table -->
<div class="dy-parent" style="display: table;">
    <div style="display: table-cell;vertical-align: middle;">
        <div class="child" style="margin: auto;" ></div>
    </div>
</div>


</body>
<style type="text/css">
    html,body{
        margin: 0;
        height: 100%;
    }
    .set-parent,.dy-parent{
        width: 300px;
        height: 200px;
        background: #eee;
        margin: 10px 0;
    }
    .child{
        width: 20px;
        height: 10px;
        background: #fff;
    }
    .dy-parent{
        width: 30%;
        height: 20%;
    }
</style>
</html>

Daily Question

https://github.com/WindrunnerMax/EveryDay