问题描述：第一眼我们看到上图，可能就想到用浮动来布局，但是在用浏览器调试缩放时“您好中国”盒子会自然成列。那么怎么让他们自适应，让好和中之间始终处于浏览器中间位置？
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .main{ height: 150px; background: gray; margin-top: 20px; position: relative; } .same{ width: 300px; height: 120px; top: 15px; left: 50%; position: absolute; text-align: center; line-height: 120px; font-size: 30px; } .one{ background-color: yellow; margin-left: -600px; } .two{ background-color: blue; margin-left: -300px; } .three{ background-color: green; } .four{ background-color: pink; margin-left: 300px; } </style></head><body><div class="main"> <span class="same one">您</span> <span class="same two">好</span> <span class="same three">中</span> <span class="same four">国</span></div> </body></html>本案例应用到知识点：相对定位、绝对定位；盒子的居中
现在就居中问题做下总结：
1、左右居中：
给盒子absolute定位，父盒子relative，left=50%；让盒子移动， Margin-left: -自身宽度一半。
2、垂直居中：
给盒子absolute定位，父盒子relative，top=50%；让盒子移动， Margin-top: -自身高度一半。
vscode
Das Telefon kann keine Verbindung zum Bluetooth-Headset herstellen
Es kann keine Verbindung zum Internet hergestellt werden
Was tun, wenn der Fehler „normal.dotm' auftritt?
index.html was ist
So lösen Sie verstümmelte Tomcat-Protokolle
Was ist der Unterschied zwischen Webstorm und Idee?
Git-Befehl
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
