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
How to use partitioning to optimize MySQL data processing for billions of data
When MySQL queries tens of millions of data, most...
Implementation of MySQL joint index (composite index)
Joint Index The definition of the joint index in ...
JS implements city list effect based on VUE component
This article example shares the specific code for...
Vue component organization structure and component registration details
Table of contents 1. Component Organization 2. Co...
Mini Program Custom TabBar Component Encapsulation
This article example shares the specific code for...
Vue uses vue-quill-editor rich text editor and uploads pictures to the server
Table of contents 1. Preparation 2. Define the gl...
An article to teach you HTML
If you are not committed to becoming an artist, t...
Combining XML and CSS styles
student.xml <?xml version="1.0" enco...
Summary of javascript date tools
let Utils = { /** * Is it the year of death? * @r...
Brief analysis of centos 7 mysql-8.0.19-1.el7.x86_64.rpm-bundle.tar
Baidu Cloud Disk: Link: https://pan.baidu.com/s/1...
Vue shopping cart case study
Table of contents 1. Shopping cart example 2. Cod...
CSS flexible layout FLEX, media query and mobile click event implementation
flex layout Definition: The element of Flex layou...
MySQL exposes Riddle vulnerability that can cause username and password leakage
The Riddle vulnerability targeting MySQL versions...
MySQL 8.0 user and role management principles and usage details
This article describes MySQL 8.0 user and role ma...
Linux disk space release problem summary
The /partition utilization of a server in IDC is ...