鍍金池/ 問答/HTML5  HTML/ 此段代碼中的div如何水平居中？

此段代碼中的div如何水平居中？

需要讓黑色div往左移動，水平居中于灰色。代碼如下：

<!DOCTYPE html> 
<html lang="en"> 
<head>
  <meta charset="UTF-8"> 
  <title>Document</title> 
</head> 
<style>
.a{width:100%; height:100px; background-color:#888;}
.b{width:50%; height:100px; background-color:#666;margin:0 auto;}
#xmenu ul li{width:100%;height:100%;text-align:center;position:relative;font-size:14px;list-style-type:none;}
#xmenu ul li span{position:absolute;width:100%;margin:0 auto;height:auto;text-align:center;z-index:10;}
#xmenu ul li span div{background: rgba(8,8,8,.8);position:absolute;top:0px;left:0px;}
#xmenu ul li span a{float:left;width:100%;height:60px;line-height:60px;text-decoration:none;}
</style>
<body> 
      <div id="xmenu">
        <ul>
        <li>
        <div class="a">0</div>
            <span>
                <div>
                    <a>1111</a>
                    <a>2222</a>
                    <a>3333</a>
                    <a>4444</a>
                </div>
            </span>
        </li>
        </ul>
    </div>
</body> 
</html>

DEMO預(yù)覽

回答
編輯回答
任她鬧

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{margin: 0;padding: 0;}
li{list-style: none;}
#xmenu{width: 100%;height: auto;}
.a{width: 100%;height: 100px;background-color: #888888;text-align: center;line-height: 100px;}
#xmenu li{width: 100%;height: auto;color:#ffffff;text-align: center;}
#xmenu span{display:block;width: 200px;height: 240px;background-color: rgba(8,8,8,.8);margin: 0 auto;}
#xmenu span p{line-height: 60px;}
</style>
<body>

<div id="xmenu">
    <ul>
        <li>
            <div class="a">0</div>
            <span>
                <div>
                    <p>1111</p>
                    <p>2222</p>
                    <p>3333</p>
                    <p>4444</p>
                </div>
            </span>
        </li>
    </ul>
</div>

</body>
</html>

2017年5月26日 17:04
編輯回答
不二心

其中一種方法, 直接在你代碼基礎(chǔ)上修改的, 你的代碼太亂了建議整理一下

<!DOCTYPE html> 
<html lang="en"> 
<head>
  <meta charset="UTF-8"> 
  <title>Document</title> 
</head> 
<style>
.a{width:100%; height:100px; background-color:#888;}
.b{width:50%; height:100px; background-color:#666;margin:0 auto;}
#xmenu ul li{width:100%;height:100%;text-align:center;position:relative;font-size:14px;list-style-type:none;}
#xmenu ul li span{position:absolute;left:0;width:100%;margin:0 auto;height:auto;text-align:center;z-index:10;}
#xmenu ul li span div{background: rgba(8,8,8,.8);position:absolute;top:0px;left:0px;left:50%;transform:translateX(-50%);}
#xmenu ul li span a{float:left;width:100%;height:60px;line-height:60px;text-decoration:none;}
</style>
<body> 
      <div id="xmenu">
        <ul>
        <li>
        <div class="a">0</div>
            <span>
                <div>
                    <a>1111</a>
                    <a>2222</a>
                    <a>3333</a>
                    <a>4444</a>
                </div>
            </span>
        </li>
        </ul>
    </div>
</body> 
</html>
2018年9月22日 19:44
編輯回答
壞脾滊

具體不知道你想實現(xiàn)什么需求，加上代碼有點亂 我用flexbox做了個差不多符合你要求的

<!DOCTYPE html> 
<html lang="en"> 
<head>
  <meta charset="UTF-8"> 
  <title>Document</title> 
</head> 
<style>
.a{width:100%; height:100px; background-color:#888;display:flex;justify-content:center}
#xmenu {font-size:14px;list-style-type:none;display:flex;flex-direction:column}
#xmenu span{display:flex;flex-direction:column;align-items:center}
#xmenu span a {width:100px;line-height:60px;text-decoration:none;background-color:rgba(8,8,8,.8);text-align:center;}
</style>
<body> 
      <div id="xmenu">
      <div class="a">0</div>
      <span>
          <a>1111</a>
          <a>2222</a>
          <a>3333</a>
          <a>4444</a>
      </span>
    </div>
</body> 
</html>
2018年1月17日 11:40
編輯回答
心夠野

水平居中主要代碼實現(xiàn)。利用定位讓自身距離左邊50%的寬度，利用css3的變換讓自身向左偏移自身的50%寬度，達(dá)到水平居中的效果。

position:absolute;
left:50%;
transform: translateX(-50%);

同理：垂直居中

position:absolute;
top:50%;
transform: translateY(-50%);

同理：垂直水平居中

position:absolute;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
2017年8月22日 06:25
編輯回答
賤人曾
#xmenu ul li span{position:absolute;width:100%;margin:0 auto;height:auto;text-align:center;z-index:10;}

你寫的這一句里面width:100%; margin:0 auto; height:auto;都是多余沒用的，換成 left:50%; transform:translateX(-50%);就可以水平居中。

2017年10月8日 08:15