实操解决绝对定位之后margin：auto失效的问题
前言
最近在学习前端 HTML和 CSS的过程中，遇到了一个问题，那就是将一个div元素（内含文本）利用 position:absolute 属性设置为绝对定位之后，想再对整个元素进行依照设备的水平居中便很难了，也就是说属性及其值：margin:10px auto; 已经失效了，正如下面所示：
一、问题重现
可以看到，在下面的HTML代码中，我定义了一个div元素，并且里边包含了文本，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/mycss1.css" type="text/css">
<title>Mistake</title>
</head>
<body>
<div class="testing_element">This is a div.</div>
</body>
</html>
首先通过引入外部样式表mycss1.css如下对其进行样式设计。代码如下：
*{
margin: 0;
padding: 0;
}
.testing_element{
width: 100px;
height: 20px;
margin: 100px auto;
padding: 10px 10px;
/* position: absolute; */
text-align: center;
background-color: rgb(11, 138, 248);
}
这里的属性值按照字体的大小设置宽度和高度，使得文字在div元素中居中显示，并且由于 属性值
margin: 100px auto;
的存在，使得整个div元素在根据屏幕的大小水平居中显示，如下图所示：
但是当我们有绝对定位需求的时候，就需要对该元素进行position属性的设置：
*{
margin: 0;
padding: 0;
}
.testing_element{
width: 100px;
height: 20px;
margin: 100px auto;
padding: 10px 10px;
position: absolute;
text-align: center;
background-color: rgb(11, 138, 248);
}
那么此时，margin属性中的auto值就失效了，不再使div元素居中显示，而是靠左显示，如下图所示：
二、解决办法
1.原理
我想到一个方法，那么就是让这个div元素存在于另一个div元素之下，作为外层元素的内容，先让外层元素水平充满整个屏幕，然后利用属性值
text-align:center;
内层div元素便会重新居中显示。但是这样还是不可以完成相应的任务。
那么，我们将这两个属性分开，一个放在外层元素里，一个放在内层元素里，这样便可以成功的实现居中效果，且可以随意的设置元素的层叠顺序了！
2.实操演示
HTML代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/mycss2.css" type="text/css">
<title>Mistake</title>
</head>
<body>
<div class="div_container">
<div class="testing_element">This is a div.</div>
</div>
</body>
</html>
CSS代码如下所示
*{
margin: 0;
padding: 0;
}
.div_container{
margin: 200px auto;
width: 100%;
height: 40px;
position: absolute;
z-index: 0;
background-color: black;
/* text-align: center; */
}
.testing_element{
width: 100px;
height: 20px;
margin: auto;
padding: 10px 10px;
text-align: center;
background-color: rgb(11, 138, 248);
}
效果如下图所示：
