CSS layout tutorial: How to achieve vertical centering
|
Preface I have been summarizing my front-end knowledge recently and have also participated in some interviews. During the interview, I encountered a question requiring vertical centering. Now I will summarize this to consolidate my knowledge. CSS vertical centering 1. Use line-height to achieve centering. This method is suitable for pure text.
<!-- css -->
<style>
.parents {
height: 400px;
line-height: 400px;
width: 400px;
border: 1px solid red;
text-align: center;
}
.child {
background-color: blue;
color: #fff;
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child">css layout, vertical centering</span>
</div>
</body>2. By setting the relative positioning of the parent container and the absolute positioning of the child, the label is adaptively centered through margin;
<!-- css -->
<style>
.parents {
height: 400px;
width: 400px;
border: 1px solid red;
position: relative;
}
.child {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background-color: blue;
/* Set the four directions to 0, and then use margin to auto to adaptively center*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child">css layout, vertical centering</span>
</div>
</body>3. Flexible layout flex The parent is set to display: flex; the child is set to margin auto to achieve adaptive centering;
<!-- css -->
<style>
.parents {
height: 400px;
width: 400px;
border: 1px solid red;
display: flex;
}
.child {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
color: #333;
background-color: yellow;
margin: auto;
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child">css layout, vertical centering</span>
</div>
</body>4. The parent is set to relative positioning, the child is set to absolute positioning, and it is achieved through displacement transform;
<!-- css -->
<style>
.parents {
height: 400px;
width: 400px;
border: 1px solid red;
position: relative;
}
.child {
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background-color: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child">css layout, vertical centering</span>
</div>
</body>5. The parent sets the elastic box and sets the elastic box related properties;
<!-- css -->
<style>
.parents {
height: 400px;
width: 400px;
border: 1px solid red;
display: flex;
justify-content: center; /* horizontal */
align-items: center; /* vertical */
}
.child {
width: 200px;
height: 100px;
color: black;
background-color: orange;
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child"></span>
</div>
</body>6. Grid layout, the parent is converted into a table, and then the child is set to inline or inline block. (It should be noted that the prerequisite for using vertical-align: middle is inline elements and elements with a display value of table-cell).
<!-- css -->
<style>
.parents {
height: 400px;
width: 400px;
border: 1px solid red;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child {
width: 200px;
height: 100px;
color: #fff;
background-color: blue;
display: inline-block; /* Child element settings inline or inline block*/
}
</style>
</head>
<body>
<!-- html -->
<div class="parents">
<span class="child"></span>
</div>
</body>Summarize The above is the full content of this article. I hope that the content of this article will have certain reference learning value for your study or work. Thank you for your support of 123WORDPRESS.COM. |
>>: Web skills: Multiple IE versions coexistence solution IETester
Recommend
A pitfall and solution of using fileReader
Table of contents A pitfall about fileReader File...
Why is it not recommended to use an empty string as a className in Vue?
Table of contents Compare the empty string '&...
MySQL conditional query and or usage and priority example analysis
This article uses examples to illustrate the usag...
WeChat Mini Program user authorization to obtain mobile phone number (getPhoneNumber)
Preface The mini program has a very convenient AP...
TypeScript problem with iterating over object properties
Table of contents 1. Problem 2. Solution 1. Decla...
Mysql experiment: using explain to analyze the trend of indexes
Overview Indexing is a skill that must be mastere...
jQuery canvas draws picture verification code example
This article example shares the specific code of ...
How to install git on linux
1. Introduction Git is a free, open source distri...
Example of how to change the domestic source in Ubuntu 18.04
Ubuntu's own source is from China, so the dow...
Detailed tutorial for installing influxdb in docker (performance test)
1. Prerequisites 1. The project has been deployed...
The complete process of Docker image creation
Table of contents Preface Creation steps Create a...
Solution to Linux QT Kit missing and Version empty problem
Currently encountering such a problem My situatio...
Detailed explanation of MySQL database tens of millions of data query and storage
Table of contents Million-level data processing s...
Vue Element UI custom description list component
This article example shares the specific code of ...
MySQL integrity constraints definition and example tutorial
Table of contents Integrity constraints Definitio...