Home > Article > Web Front-end > How to achieve centering in css if the width and height are not fixed
How to achieve centering in css if the width and height are not fixed
- 藏色散人Original
- 2020-12-17 10:09:012857browse
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.
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;
}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%); }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;
}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!