Examples of vertical center and vertical scroll bars in css3

Vertical content concentration

It is difficult to control the content in the vertical direction relative to the content in the horizontal position, especially when the scroll bar is taken into account. This pure CSS code can work well.

. Container {
Min-height: 6.5em;
Display: table-cell;
Vertical-align: middle;
}

Vertical scroll bar

This code ensures that your HTML elements are always slightly higher than the position where the browser scroll bar stays.

Html {height: 101%}

CSS3 Transforms implements vertical and horizontal center

Code for horizontal and vertical center

. Parent {
Width: 200px;
Height: 200px;
Background-color: black;
}
. Child {
Position: relative;
Height: 100px;
Width: 100px;
Top: 50%;
Left: 50%;
Background-color: red;
-Webkit-transform: translateX (-50%) translateY (-50% );
-Moz-transform: translateX (-50%) translateY (-50% );
-O-transform: translateX (-50%) translateY (-50% );
-Ms-transform: translateX (-50%) translateY (-50% );
Transform: translateX (-50%) translateY (-50% );
}