absolute内容自适应居中
1、新建一个html 页面。如图：
2、在html页面上找到<body>标签，在<body>标签里面新建一个<div>标签，同时为这个<div>标签设置类为：relative；然后在<div>标签里再新建一个<div>标签，这个标签的样式类为：absolute，并在该div标签里输入一些需要居中的内容。
相关代码：
<div class="relative">
<div class="absolute">
就算你用了absolute定位，我也要居中
</div>
</div>
效果如图：
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>
4、发现text-align: center无效。
把html页面代码保存后我们使用浏览访问，发现内容无法居中。如图：
5、解决内容无法居中。
回到html代码页面找到absolute类，在这个类中添加：left: 0; right: 0； 然后保存; 如图：
6、重新使用浏览器打开，我们会发现内容已经自动居中了。如图：
7、所有代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-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>
