I saw an article in W3CPlus a few days ago, which mentioned using CSS to create horizontal and vertical centering. When testing the sixth point, I found some small problems:
Add A meaningless new tag
<div id="extra">
When setting the content width, the text wraps
For the first point, the solution is to use: before pseudo-element:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>水平垂直居中</title> 6 <style> 7 .wrapper { 8 width: 200px; 9 height: 200px;10 background: skyblue;11 }12 .wrapper:before {13 content: '.';14 display: inline-block;15 vertical-align: middle;16 height: 100%;17 }18 .content {19 display: inline-block;20 text-align: center;21 }22 </style>23 </head>24 25 <body>26 <div class="wrapper">27 <div class="content">多行文字居中 多行文字居中 多行文字居中 </div>28 </div>29 </body>30 </html>
Demo attached
But! Everyone has also noticed: the text is wrapped
This is the gap caused by the inline-block causing trouble
In order to solve this problem, you can try this hack:
1 .wrapper {2 font-size:03 }4 5 .content {6 font-size:16px7 }
Save and look again:
Done!
Attached complete source code
Reference materials (recommended reading):
CSS production of horizontal and vertical center alignment
How to solve the blank spacing of inline-block elements
inline-block past life and present life
How to light up Douyin close friends moment
What should I do if my computer starts up and the screen shows a black screen with no signal?
Kaspersky Firewall
plugin.exe application error
nvidia geforce 940mx
Do you know if you cancel the other person immediately after following them on Douyin?
How to calculate the refund handling fee for Railway 12306
Top ten digital currency exchanges
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
