The layout of the two elements in the css div is about. How to center them vertically?

Center question

divdiv
:::flex

Mar.24,2021

1. Scheme 1

display:inline;
line-height=height

2. Option 2

position:absolute;
top:50%;
translate:transform(0,-50%)

flex layout:

.parent: {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

I. parent element flex scheme:

display:-webkit-box;
-webkit-box-align:center;
display:box;
box-align:center;
display:-webkit-flex;
display:flex;
align-items:center;

II. Parent element display:table scheme.
Center element is in the element of display:table-cell, and set vertical-align:center

III. Css3 scheme.
absolute positioning of central elements

position:absulote;
top:50%;
transform:translateY(-50%);

just use flex-box. In these days, you have to consider compatibility. Where can you find so many people using old systems?


give a reference, horizontal and vertical center

Menu