CSS3 implements horizontal centering, vertical centering, horizontal and vertical centering example code
|
As a front-end monkey, whether it is during an interview or at work, we will more or less encounter the effect of "using CSS to center". Today I will write an article about several methods of vertical and horizontal centering with CSS. Example 1: Start with the simplest horizontal centering margin: 0 auto; Block-level elements can be centered in the middle of the parent element using margin: 0 auto;, but remember to set the width and height of the block-level element. HTML Part
<div class="wrap">
<div class="example1">
<p>CSS</p>
</div>
</div>CSS Part
.example1 {
width: 200px;
height: 200px;
background-color: orange;
}
.example1 p {
width: 100px;
height: 100px;
background-color: red;
margin: 0 auto;
line-height: 100px;
text-align: center;
}
Example 2: Horizontally and vertically centering elements position element with known width absolute positioning + margin reverse offset
.wrap { position: relative; background-color: orange; width: 300px; height: 300px; } .example2 { background-color: red; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px; }position transform element unknown width If the element width is unknown, just replace margin: -50px 0 0 -50px ; in example2 above with: transform: translate(-50%,-50%) ;
Example 3: flex layout HTML is the same as above, with css code attached
.warp {
background-color: #FF8C00;
width: 200px;
height: 200px;
display: flex;
justify-content: center; /*Center the sub-item horizontally*/
align-items: center; /*Align the subitems vertically*/
}
.example3 {
background-color: #F00;
width: 100px;
height: 100px;
}
The other is the table-cell layout, which I won’t introduce because I don’t want to. Example 4: Absolute layout Use absolute layout for div, set margin:auto; and set the values of top, left, right, and bottom to be equal, they do not have to be all 0. HTML Part
<div class="warp">
<div class="example3">
Center display</div>
</div>CSS Part
.warp {
position: relative;
background-color: orange;
width: 200px;
height: 200px;
}
.example3 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
width: 100px;
height: 100px;
margin: auto;
}
Example 5: Relative positioning of child elements, and vertical centering through translaY()
.warp {
position: relative;
background-color: orange;
width: 200px;
height: 200px;
}
.example3 {
position: relative;
top:50%;
transform:translateY(-50%);
background-color: red;
width: 100px;
height: 100px;
margin: 0 auto;
}
Example 6: Use inline-block's vertical-align: middle to align the after pseudo-element Using inline-block's vertical-align:middle to align the after pseudo-element can achieve better results. The size of the centered block can be wrapping and adaptive to the content, and the compatibility is also quite good. The disadvantage is that horizontal centering requires consideration of the whitespace in the inline-block interval (a legacy issue with code line breaks).
.warp {
text-align: center;
overflow:auto;
width: 200px;
height: 200px;
background-color: orange;
}
.example3 {
display: inline-block;
background-color: red;
vertical-align: middle;
width: 100px;
height: 100px;
}
.warp:after {
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
margin-left: -0.25em;
/* To offset spacing. May vary by font */
}
Example 7: display: flex-box flexbox layout. This is the ultimate layout method, specially designed to solve all kinds of layout and positioning problems! Advantages: Can solve various arrangement and layout problems.
.warp {
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
width: 200px;
height: 200px;
background-color: orange;
}
.example3 {
width: 100px;
height: 100px;
background-color: red;
}
Example 1 in the center of the picture:
<div class="warp">
<div class="example3">
<img src="xxxx" alt="">
</div>
</div>
.warp {
width: 200px;
height: 200px;
background-color: orange;
display: flex;
align-items: center;
justify-content: center;
}
.example3 img {
width: 100px;
height: 100px;
background-color: blue;
}
Summarize This concludes this article about example codes for implementing horizontal centering, vertical centering, and horizontal and vertical centering with CSS3. For more relevant CSS3 vertical centering content, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: How to implement page jump in Vue project
>>: Summary of Form Design Techniques in Web Design
Recommend
What does mysql database do?
MySQL is a relational database management system....
Tomcat uses Log4j to output catalina.out log
Tomcat's default log uses java.util.logging, ...
Experience in designing a layered interface in web design
Many netizens often ask why their websites always ...
Summary of various implementation methods of mysql database backup
This article describes various ways to implement ...
CSS implements the web component function of sliding the message panel
Hello everyone, I wonder if you have the same con...
Using Zabbix to monitor the operation process of Oracle table space
0. Overview Zabbix is an extremely powerful ope...
JavaScript implements the drag slider puzzle verification function (html5, canvas)
introduction: Slider drag verification is now use...
A very detailed explanation of the Linux DHCP service
Table of contents 1. DHCP Service (Dynamic Host C...
React realizes the whole process of page watermark effect
Table of contents Preface 1. Usage examples 2. Im...
Implementation example of scan code payment in vue project (with demo)
Table of contents Demand background Thought Analy...
How to implement a single file component in JS
Table of contents Overview Single file components...
View the frequently used SQL statements in MySQL (detailed explanation)
#mysql -uroot -p Enter password mysql> show fu...
Understanding the CSS transform-origin property
Preface I recently made a fireworks animation, wh...
Detailed explanation of Nodejs array queue and forEach application
This article mainly records the problems and solu...
Web page CSS priority is explained in detail for you
Before talking about CSS priority, we need to und...