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
Summary of the use of element's form elements
There are many form elements. Here is a brief sum...
The difference between HTML iframe and frameset_PowerNode Java Academy
Introduction 1.<iframe> tag: iframe is an i...
Detailed explanation of how to use JavaScript paging component
The pagination component is a common component in...
A brief analysis of MySQL's lru linked list
1. Briefly describe the traditional LRU linked li...
Summary of the Differences between find() and filter() Methods in JavaScript
Table of contents Preface JavaScript find() Metho...
How does the composite index of MySQL take effect?
Table of contents background Understanding compos...
How to set background blur with CSS
When making some pages, in order to make the page...
JavaScript function encapsulates random color verification code (complete code)
An n-digit verification code consisting of number...
HTML sets bold, italic, underline, strikethrough and other font effects
<p><b>This is bold font</b></...
Best Practices for MySQL Upgrades
MySQL 5.7 adds many new features, such as: Online...
Example of using store in vue3 to record scroll position
Table of contents Overall Effect Listen for conta...
Docker container deployment attempt - multi-container communication (node+mongoDB+nginx)
The reason is this I wanted to deploy a mocker pl...
A complete example of mysql querying batch data from one table and inserting it into another table
Say it in advance Nodejs reads the database as an...
JavaScript implementation of classic snake game
This article shares the specific code of JavaScri...
Detailed explanation of Linux commands and file search
1. Perform file name search which (search for ...