在前端编码中，我们经常会使用到absolute定位，使用absolute定位后会存在一个问题，那就是把绝对定位里的内容设置自动居中。那如何使用absolute定位后让内容自适应居中呢？
新建一个html 页面。如图：
在html页面上找到
标签，在标签里面新建一个标签，同时为这个
标签设置类为：relative；然后在
![魔兽世界[勇士的早餐]任务怎么做](/upload/jingyan/2024/0827/bee99d68.jpg)
标签里再新建一个
标签，这个标签的样式类为：absolute，并在该div标签里输入一些需要居中的内容。标签，在<title>标签后新建一个<style>标签；</p><p>2.在<style>标签创建relative、absolute类；</p><p>3.relative类设置内容为：position: relative;</p><p>4.absolute类设置内容为：position: absolute; text-align: center;</p><p>相关代码：</p><p> <style></p><p> .relative{</p><p> position: relative;</p><p> }</p><p> .absolute{</p><p> position: absolute;</p><p> text-align: center;</p><p> }</p><p> </style></p><p>发现text-align: center无效。</p><p>把html页面代码保存后我们使用浏览访问，发现内容无法居中。如图：</p><p>解决内容无法居中。</p><p>回到html代码页面找到absolute类，在这个类中添加：left: 0; right: 0； 然后保存; 如图：</p><p>重新使用浏览器打开，我们会发现内容已经自动居中了。如图：</p><p>所有代码：</p><p><!DOCTYPE html></p><p><html></p><p><head></p><p><meta charset="UTF-8"></p><p><title>absolute定位内容居中
相关代码：
就算你用了absolute定位，我也要居中
效果如图：
设置样式。
1.在html页面找到
就算你用了absolute定位，我也要居中
相关文章
