Dead centering (vertically and horizontally) css-only tabs

Question

I really need your help with this,

Presently, given the current html and css markup below, it puts the tabs close to the top of the users screen. How can the markup be modified below such that I can arrange for it to be dead-centered (centered both vertically and horizontally) instead?

Here's an example of the fiddle: https://jsfiddle.net/812ehkyf/559/

Here's the markup:

<!DOCTYPE html>

<html>

<head>

<style>
body {
   background: #999;  
   padding: 20px 40px; 
}

.tabs {
  position: relative;   
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 35px 0 25px;
  background: white;
}
.tab {
  float: left;

}
.tab label {
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
  top: -29px;
  -webkit-transition: background-color .17s linear;
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: -1px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc; 
  -webkit-transition: opacity .6s linear;
  opacity: 0;
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
  opacity: 1;
}
</style>

</head>

<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">
           <p>Stuff for Tab One</p>
       </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">
           <p>Stuff for Tab Two</p>

           <img src="http://placekitten.com/200/100">
       </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">
           <p>Stuff for Tab Three</p>

           <img src="http://placedog.com/200/100">
       </div> 
   </div>

</div> 

</body>

</html>

For the tabs to be centered horizontally you could add a text-align: center; to the 'tabs' class. See Fiddle: https://jsfiddle.net/812ehkyf/576/ — code-orange, Mar 08 '18 at 21:01
I need the entire box that encompasses my tabs to be dead center. It seems impossible to me. — BobbyJones, Mar 08 '18 at 21:03
You probably need to specify a width to the tab container. https://jsfiddle.net/812ehkyf/595/ — code-orange, Mar 08 '18 at 21:26

score -1 · Answer 1 · answered Mar 08 '18 at 21:07

-1

You can apply css tricks (that can stop working with a browser render update). Centering vertically is a huge job sometimes, there's a solution using jQuery, you can even use javascript or another js framework.

//get the height of the window
    var h = $(window).height();
//get the tabs height
    var e = $('.tabs').height();
//full height - tabs height = space between tabs and top plus the space between tabs and bottom, divided by two
    var y = ((h - e) / 2);
//we set this half of blank space as margin-top.
    $('.tabs').css('margin-top', y);

It will work on all screens. You can trigger it when

 $(document).ready

and i recommend you to add a trigger for

$(window).resize()

event listener to keep the responsiveness.

https://jsfiddle.net/812ehkyf/580/

answered Mar 08 '18 at 21:07

JoelBonetR

1,551
1
15
21

`Centering vertically is a huge job sometimes,` don't tell you are serious here ?? this so huge to consider jquery ? – Temani Afif Mar 08 '18 at 21:33
`as it does not work when they add more things`--> so you trick si not good. and this solution is not simple, you are obliging the OP to use a Whole framework in order to do a small calculation ... and such thing can easily be done using CSS and perfectly also ... check the duplicate above and many other links on SO – Temani Afif Mar 08 '18 at 21:38
You are free to provide a JS solution and the OP are free to pick it or not but since this website is a community website open to everyone, i don't agree with such solution at this stage ... by the way if you agree that the OP did 0 effort of seraching you can flag the question as duplicate of others – Temani Afif Mar 08 '18 at 21:56
it was already done, whats the point on do it again? I understand your point of view, but i'm only providing a clean, cross browser solution so i can't figure out why are you downvoting. If you don't like the answer because it does not work i can understand, but it's working, it's explained, the procedure of it is correct, there's a working example, the code is clean and there's additional info. There's no reason for argue or down voting according to SO normative. Instead of arguing with me and a well posted solution, make your own post if you want. – JoelBonetR Mar 08 '18 at 22:49
Oh and.. i'm not obliguing nobody to do nothing, SO is to provide logical knowledge, i explained the logic and a code, as i said on the post, you can traduce it to whatever you want, including plain javascript that is supported natively by all browsers. – JoelBonetR Mar 08 '18 at 22:53

Dead centering (vertically and horizontally) css-only tabs

1 Answers1