Question

我真的需要你的帮助，

我如何能够将死亡中心（垂直和水平）定位在用户屏幕中间的css菜单中。（我们假设不同的人使用不同的屏幕分辨率）因此，我会寻找一个流动的例子来工作。

这是有问题的CSS和HTML标记：

<!DOCTYPE html>
    
    <html>
    
    <head>
    
    <style type="text/css">
    * {
    	font-family: Verdana,Arial,sans-serif;
    	font-size: 9pt;
    }
    body {
    	background: rgb(105,105,105);
    }
    </style>
    
    <style type="text/css">
    .tabs {
      position: relative;   
      min-height: 292px; /* This part sucks */
      clear: both;
      margin: 25px 0;
    color:#7c7766;
    }
    .tab {
      float: left;
    }
    .tab label {
      background: rgb(105,105,105);
      padding: 10px; 
      border: 0px solid #787265; 
      margin-left: -1px; 
      position: relative;
      left: 1px;
      color: #FFF;
    }
    
    .tab label:hover {
      background: #d7d3c3; 
      padding: 10px; 
      border: 0px solid #787265; 
      margin-left: -1px; 
      position: relative;
      left: 1px; 
      cursor: pointer;
    }
    
    .tab [type=radio] {
      display: none;   
    }
    .content {
      position: absolute;
      top: 25px;
      left: 0;
      background: #f5f1e6;
      right: 0;
      bottom: 0;
      padding: 20px;
      border: 0px solid #787265; 
    }
    [type=radio]:checked ~ label {
      background: #f5f1e6;
      border-bottom: 0px solid white;
      z-index: 2;
      color: #000;
    }
    [type=radio]:checked ~ label ~ .content {
      z-index: 1;
    }
    </style>
    
    <body>
    
    <div class="tabs">
        
       <div class="tab">
           <input type="radio" id="tab-1" name="tab-group-1" checked>
           <label for="tab-1">Tab One</label>
           
           <div class="content">
               stuff 1
           </div> 
       </div>
        
       <div class="tab">
           <input type="radio" id="tab-2" name="tab-group-1">
           <label for="tab-2">Tab Two</label>
           
           <div class="content">
               stuff 2
           </div> 
       </div>
        
        <div class="tab">
           <input type="radio" id="tab-3" name="tab-group-1">
           <label for="tab-3">Tab Three</label>
         
           <div class="content">
               stuff 3
           </div> 
       </div>
        
    </div>
    
    </body>
    
    </html>

Answer 1

您可以使用以下css将元素居中。

.tabs{
    position: absolute;
    top: 50%;
    left: 50%;
    translate(-50%, -50%);
}

虽然我可能会将它放入包装器中，并将所有.tabs标记放在其中，以便不必更改任何现有标记。

<div class="wrapper">
    <div class="tabs">
        <!-- Rest of your markup -->
    </div>
</div>


.wrapper{
    position: absolute;
    top: 50%;
    left: 50%;
    translate(-50%, -50%);
}

Answer 2

你可以尝试这样的东西......我添加宽度来说明居中

 <div class="tabs" style="width:500px;margin-top:30%;margin-left:auto;margin-right:auto;">
  ...
  </div>

如何将我的CSS菜单中心（流体样式）居中

2 个答案: