實操解決絕對定位之後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元素中居中顯示，并且由于 屬性值
的存在，使得整個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元素之下，作為外層元素的内容，先讓外層元素水準充滿整個螢幕，然後利用屬性值
内層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);
}
效果如下圖所示：