问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
wjnds
    18123146

    需要让黑色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预览

    htmlcsshtml5javascript
    阅读 3.3k
    5 个回答
    得票最新
    头像
    怀旧
      50117
      ✓ 已被采纳

      水平居中主要代码实现。利用定位让自身距离左边50%的宽度，利用css3的变换让自身向左偏移自身的50%宽度，达到水平居中的效果。

      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%);
      头像
      Anx
        3484

        其中一种方法, 直接在你代码基础上修改的, 你的代码太乱了建议整理一下

        <!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>
        头像
        fan0128
          41
          新手上路，请多包涵

          具体不知道你想实现什么需求，加上代码有点乱 我用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>
          头像
          walker213
            3327
            #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%);就可以水平居中。

            头像
            Echo
              1
              新手上路，请多包涵

              <!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>

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题