absolute内容自适应居中

2024-10-14 03:41:52

1、新建一个html 页面。如图：

3、设置样式。1.在html页面找到<title>标签，在<title>标签后新建一个<style>稆糨孝汶;标签；2.在<style>标签创建relative、absolute类；3.relative类设置内容为：position: relative;4.absolute类设置内容为：position: absolute; text-align: center;相关代码： <style> .relative{ position: relative; } .absolute{ position: absolute; text-align: center; } </style>

5、解决内容无法居中。回到html代码页面找到absolute类，在这个类中添加：left: 0; right: 0；然后保存; 如图：

7、所有代码：<!DOCTYPE html><html><head><meta charset="U皈其拄攥TF-8"><title>absolute定位内容居中</title><style>.relative{position: relative;}.absolute{position: absolute;text-align: center;left: 0;right: 0;}</style></head><body><div><div>就算你用了absolute定位，我也要居中</div></div></body></html>