How to achieve centering in css if the width and height are not fixed-CSS Tutorial-php.cn

How to achieve centering in css if the width and height are not fixed

藏色散人

Release： 2020-12-17 10:09:01

Original

2963 people have browsed it

Methods to achieve centering in css with non-fixed width and height: 1. Use flex for layout to achieve centering; 2. Use transform in css3 to offset elements; 3. Use table-cell to achieve centering.

How to achieve centering in css if the width and height are not fixed

The operating environment of this tutorial: windows7 system, css3 version. This method is suitable for all brands of computers.

Recommendation: "css video tutorial"

How to achieve centering when css width and height are not fixed?

Method 1: Use flex for layout

Everyone’s first reaction may be flex. Because its writing method is simple and intuitive enough, and there is no problem with compatibility. It is the first choice for centering on mobile phones.

<div class="wrapper flex-center">
    <p>horizontal and vertical</p>
</div>
.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

Copy after login

Using two key attributes: justify-content and align-items, both are set to center to achieve centering.

It should be noted that the flex-center here must be hung on the parent element to make the only child element centered.

Method 2: Use position transform

Mainly uses transform in css3 for element offset, the effect is very good

This method is very powerful and flexible, not only Limited to achieving centered display. In terms of compatibility, IE is also used for comparison. The second method can be used by IE8 and above. Problems will occur in IE8 and below.

<body>
    <div id="box">
        <div id="content">div被其中的内容撑起宽高</div>
    </div>        
</body>
body,html { margin:0; width:100%; height:100%; }
#box { width:100%; height:100%; background:rgba(0,0,0,0.7); position:relative; }
#content{ position:absolute; background:pink; left:50%; top:50%;  
transform:translateX(-50%) translateY(-50%); 
-webkit-transform:translateX(-50%) translateY(-50%); }

Copy after login

Method 3: Use table-cell

Use table's cell centering effect to display. Like flex, it needs to be written on the parent element.

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>
.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

Copy after login

The above is the detailed content of How to achieve centering in css if the width and height are not fixed. For more information, please follow other related articles on the PHP Chinese website!