8 vertical centering methods

Eight vertical centering methods

Vertically centered requirements are often encountered , Eight methods of vertical centering are practiced through data .

The following methods revolve around this HTML an
HTML Code

    <div  class="wrap">
        <div  class="box"></div>
    </div>

CSS
Method 1（ Commonly used ）：display：flex

.wrap{
	width:300px;
	height:300px;
    border: 1px solid red;
    display:flex;
    justify-content:center;
    align-items:center;
}
.box{
	height:100px;
	width:100px
    boder:1px solid blue;
}

Method 2： table-cell

vertical-align Property to set the vertical alignment of an element .
This attribute defines the vertical alignment of the baseline of the element in the row with respect to the baseline of the element in the row . It is allowed to specify a negative length value and a percentage value . This will make the element lower rather than higher . In table cells in , This property sets the alignment of the cell contents in the cell box .

        .wrap{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            display: inline-block;
        }

Method 3: margin,transform coordination

.wrap{
            width: 300px;
            height: 300px;
            background-color: pink;
            /* border: 1px solid red; */
            /* Prevent collapse of outer margin . The method to solve the collapse of outer margin ：
             Parent element plus overflow:hidden Or add a border */
            overflow: hidden;
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: plum;
            margin:50% auto;
            transform: translateY(-50%); 
        }

Method 4: inline-block+vertical-aligin

        .wrap {
            width: 300px;
            height: 300px;
            background-color: pink;
            text-align: center;
            line-height: 300px;
        }
        .box {
            width: 100px;
            height: 100px;
            /*  Reset the row height of child elements , Otherwise, the row height of the parent element will be inherited */
            line-height: 100px;
            background-color: plum;
            display: inline-block;
            /* middle    Place this element in the middle of the parent element . */
            vertical-align: middle;
        }

Method 5：absolute+ negative margin

        .wrap{
            width: 300px;
            height: 300px;
            position: relative;
            background-color: plum;
        }
        .box{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            /* Half the width and half the height */
            margin-left: -50px;
            margin-top: -50px;
            background-color: powderblue;
        }

Method 6 absolute+margin:auto
And methods 5 similar , When width and height are unknown

        .wrap{
            width: 300px;
            height: 300px;
            position: relative;
            background-color: plum;
        }
        .box{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
            bottom:0;
            right:0;
            margin:auto;
            background-color: powderblue;
        }

Method 7：absolute+transform
With the method 5 similar

 .wrap {
            width: 300px;
            height: 300px;
            position: relative;
            background-color: plum;
        }

        .box {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 50%;
            top: 50%;
            
            transform: translate(-50%,-50%);
            background-color: powderblue;
        }

Method 8 Powerful grid
Ruan Yifeng Grid Grid layout tutorial

.wrap {
            width: 300px;
            height: 300px;
            display: grid;
            background-color: plum;
        }

        .box {
            width: 100px;
            height: 100px;
            align-self: center;
            justify-self: center;
            background-color: powderblue;
        }