How do I center my css menu dead center (fluid style)

Question

I really need your help,

How would I be able to dead center (vertically and horizontally) position my css menu smack dab in the middle of the users screen. (We are assuming that different people use various screen resolutions) therefore, I would be looking for a fluid example to work from.

Here's the CSS and HTML markup in question:

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

where is the menu? or do you want to center the tab header? – karthick Feb 21 '18 at 03:31 — karthick, Feb 21 '18 at 03:31
If I can center the entire
that would be awesome!
– BobbyJones Feb 21 '18 at 03:33 — BobbyJones, Feb 21 '18 at 03:33

score 2 · Accepted Answer · answered Feb 21 '18 at 03:46

You are able to center a element by using the below css.

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

Although I would probably put it into a wrapper, and put all your .tabs markup inside it, as to not have to change any of your existing markup.

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


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

score 0 · Answer 2 · answered Feb 21 '18 at 03:41

0

You can try something like this...I added width to illustrate centering

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

answered Feb 21 '18 at 03:41

Stradosphere

1,285
3
14
40

How do I center my css menu dead center (fluid style)

2 Answers2