7 ways to vertically center elements with CSS

【1】Know the width and height of the centered element

absolute + negative margin

Code Implementation

.wrapBox5{
    width: 300px;
    height: 300px;
    border:1px solid red;
    position: relative;
}
.wrapItem5{
    width: 100px;
    height: 50px;
    position: absolute;
    background:yellow;
    top: 50%;
    left:50%;
    margin-top: -25px;
    margin-left: -50px;
}

Operation Results

absolute + margin auto

Code Implementation

.wrapBox{
    width: 300px;
    height: 300px;
    background: yellow;
    position: relative;
}
.wrapItem{
    width: 100px;
    height: 50px;
    background:green;
    display: inline-block;
    position: absolute;
    top: 0px;
    bottom:0px;
    left: 0px;
    right: 0px;
    margin:auto;
}

absolute + calc

Code Implementation

.wrapBox6{
    width: 300px;
    height: 300px;
    border:1px solid green;
    position: relative;
}
.wrapItem6{
    width: 100px;
    height: 50px;
    position: absolute;
    background:yellow;
    top: calc(50% - 25px);
    left:calc(50% - 50px);
}

Operation Results

Three comparisons summary

When the width and height of the centered element are known, the method of setting the center is relatively simple. The essence of the three methods is the same. They all perform absolute positioning on the centered element. After positioning to 50% on the top and 50% on the left, they are pulled back to half the width and height of the centered element to achieve true centering. The difference between the three methods lies in the different ways of pulling back the width and height of the element itself.

【2】The width and height of the centered element are unknown

absolute + transform

Code Implementation

.wrapBox{
    width: 300px;
    height: 300px;
    background:#ddd;
    position: relative;
}
.wrapItem{
    width: 100px;
    height: 50px;
    background:green;
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50% , -50%);
}

Operation Results

The principle is similar to the implementation method of known width and height, except that the width and height of the current centered element are unknown, so it is necessary to automatically obtain the width and height of the current centered element. The translate attribute implements exactly this functionality.

Advantages and Disadvantages Advantages: Automatically calculate its own width and height Disadvantages: If other properties of transform are used at the same time, they will affect each other.
Therefore: This method is recommended when other properties of transform are not used.

Flex layout

.wrapBox2{
    width: 300px;
    height: 300px;
    background: blue;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*Note: Even if you do not set the child element as a row block element, it will not occupy a single layer*/
.wrapItem2{
    width: 100px;
    height: 50px;
    background:green;
}

Operation Results

Principle: Set the parent element to flow layout, and set the child element to the center according to the property characteristics of flex layout.

Advantages and Disadvantages Advantages: flex layout is flexible and does not require any settings for child elements Disadvantages: compatibility. The float, clear, position, etc. of child elements cannot be used. If other layouts are also present, it is easy to have an impact.

table-cell layout

Code Implementation

.wrapBox3{
    width: 300px;
    height: 300px;
    background: yellow;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.wrapItem3{
    width: 100px;
    height: 50px;
    background:green;
    display: inline-block;
}

Operation Results

Principle: According to the vertical-align property of table, you can set the element to be centered within the table element, and then set the horizontal center according to text-align.

Table Elements

Code Implementation

.tableBox{
    border:2px solid yellow;
    width: 300px;
    height: 300px;
}
.tableBox table{
    width:100%;
    height:100%;
}
.centerWrap{
    text-align: center;
    vertical-align: middle;
}
.centerItem{
    display: inline-block;
    background:pink;
}

Operation Results

To summarize, the table tag is used for layout, mainly using the vertical-align attribute and text-align attribute. However, compared with the previous method, using the table tag will generate a lot of redundant code. Not recommended

This concludes this article about 7 ways to vertically center elements with CSS. For more information about vertically centering elements with CSS, please search previous articles on 123WORDPRESS.COM or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future!