What are the common implementation methods of horizontal and vertical centering in CSS? Three common horizontal and vertical centering methods in CSS

This article introduces to you what are the common implementation methods of horizontal and vertical centering in CSS? Three common horizontal and vertical centering methods in CSS have certain reference value. Friends in need can refer to them. I hope it will be helpful to you.

When you don’t know the width and height of the sub-element, how to achieve the horizontal and vertical centering of the sub-element? Here are several methods:

1. Use positioning and transform to achieve

HTML and CSS code are as follows:

<div class="super-div">
        <div class="sub-div">利用定位和transform
            <br/>实现水平垂直居中</div>
</div>
 
 .super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
 .sub-div {
            background-color: green;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* top left 分别相对于父元素的高度和宽度，translate相对于自身的宽度和高度 */
        }

The core of this implementation lies in the comment part. When relative positioning, top and left are calculated relative to the height and width of the parent element, while transform is relative Calculated with its own width and height; The effect is as follows:

2. Use table-cell layout to implement

HTML and CSS code implementation as follows:

     <div class="super-div table">
        <div class="table-cell">利用table-cell
            <br/>实现水平垂直居中</div>
    </div> 
 
 
   .super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
   .table {
            display: table;
        }
 
   .table-cell {
            display: table-cell;
            /*垂直居中*/
            vertical-align: middle;
            /*水平居中*/
            text-align: center;
            background-color: green;
        }

The parent element is set to table layout, and the child element is set to table-cell layout. Then realize the vertical and horizontal centering of the child elements, the effect is as follows:

3. Use flex layout to implement

HTML and CSS code as follows:

<div class="super-div flex">
        <div class="flex-center">利用flex布局
            <br/>实现水平垂直居中</div>
</div> 
 
.super-div {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
 
 .flex {
            display: flex;
            /*flex布局*/
            justify-content: center;
            /*使子项目水平居中*/
            align-items: center;
            /*使子项目垂直居中*/
        }
 
 .flex-center {
            background-color: green;
        }

The effect is as follows:

Recommended related articles:

Two ways to use tables in CSS (examples)

What is the concept of multi-column layout? Application of CSS multi-column layout (example code)

The above is the detailed content of What are the common implementation methods of horizontal and vertical centering in CSS? Three common horizontal and vertical centering methods in CSS. For more information, please follow other related articles on the PHP Chinese website!