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:   Here's the markup:  &lt;!DOCTYPE html&gt;  &lt;html&gt;  &lt;head&gt;  &lt;style&gt; 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; } &lt;/style&gt;  &lt;/head&gt;  &lt;body&gt;   &lt;div class="tabs"&gt;     &lt;div class="tab"&gt;        &lt;input type="radio" id="tab-1" name="tab-group-1" checked&gt;        &lt;label for="tab-1"&gt;Tab One&lt;/label&gt;         &lt;div class="content"&gt;            &lt;p&gt;Stuff for Tab One&lt;/p&gt;        &lt;/div&gt;     &lt;/div&gt;     &lt;div class="tab"&gt;        &lt;input type="radio" id="tab-2" name="tab-group-1"&gt;        &lt;label for="tab-2"&gt;Tab Two&lt;/label&gt;         &lt;div class="content"&gt;            &lt;p&gt;Stuff for Tab Two&lt;/p&gt;             &lt;img src="http://placekitten.com/200/100"&gt;        &lt;/div&gt;     &lt;/div&gt;      &lt;div class="tab"&gt;        &lt;input type="radio" id="tab-3" name="tab-group-1"&gt;        &lt;label for="tab-3"&gt;Tab Three&lt;/label&gt;         &lt;div class="content"&gt;            &lt;p&gt;Stuff for Tab Three&lt;/p&gt;             &lt;img src="http://placedog.com/200/100"&gt;        &lt;/div&gt;     &lt;/div&gt;  &lt;/div&gt;   &lt;/body&gt;  &lt;/html&gt;
6298
Best way to center a &lt;div&gt; element on a page both vertically and horizontally?  I know that margin-left: auto; margin-right: auto; will center on the horizontal, but what is the best way to do it vertically, too?
1077
I have a div 200 x 200 px. I want to place a 50 x 50 px image right in the middle of the div.   How can it be done?  I am able to get it centered horizontally by using text-align: center for the div. But vertical alignment is the issue..
58280
I'm trying to center a fixed size control within a form.  Out of interest, is there a non-idiotic way of doing this? What I really want is something analogous to the text-align css property.  At the moment, I'm setting the padding property of the surrounding form to a suitable size and setting the Dock property of the control to fill.
96569
The line-height property usually takes care of vertical alignment, but not with inputs. Is there a way to automatically center text without playing around with padding?
71633
With HTML/CSS, how can I make an element that has a width and/or height that is 100% of it's parent element and still has proper padding or margins?  By "proper" I mean that if my parent element is 200px tall and I specify height = 100% with padding = 5px I would expect that I should get a 190px high element with border = 5px on all sides, nicely centered in the parent element.  Now, I know that that's not how the standard box model specifies it should work (although I'd like to know why, exactly...), so the obvious answer doesn't work:  #myDiv {     width: 100%     height: 100%;     padding: 5px; }   But it would seem to me that there must be SOME way of reliably producing this effect for a parent of arbitrary size. Does anyone know of a way of accomplishing this (seemingly simple) task?  Oh, and for the record I'm not terribly interested in IE compatibility so that should (hopefully) make things a bit easier.   EDIT: Since an example was asked for, here's the simplest one I can think of:  &lt;html style="height: 100%"&gt;     &lt;body style="height: 100%"&gt;         &lt;div style="background-color: black; height: 100%; padding: 25px"&gt;&lt;/div&gt;     &lt;/body&gt; &lt;/html&gt;   The challenge is then to get the black box to show up with a 25 pixel padding on all edges without the page growing big enough to require scrollbars.
42523
When will SO stop wasting real estate of my screen by having static width layout?  EDIT  It would be very interesting to hear how does Joel, being UI specialist, feel about this. JoelOnSoftware site has fluid layout...
51052
I'm working on a new version of a corporate website. As it stands, it has about 6 different sections. Each of those sections have between 3 to 6 sub-pages. My nav is at the top of the page and looks a bit like the wireframe below:         &ndash; Wireframes created with   I have made some simple dropdowns with js to handle the desktop side of things. For tablets and mobile devices I have gone with the standard right aligned hamburger menu button. The more I look at the site on a tablet, the more I like the lack of clutter at the top.  Apart from potentially confusing some users, what are the downsides of going with the hamburger menu for all devices?    and a number of other sites do this already.
118601
I have the following page which I am trying to get the first line to be centered without affecting the other text. However, using \centerline{} seems to ignore the page margin and does not wrap text to fit the original margin.    \documentclass[12pt,a4paper]{article} \usepackage[utf8]{inputenc} \usepackage{amsmath} \usepackage{amsfonts} \usepackage{amssymb} \usepackage{graphicx} \usepackage{hyperref} \begin{document} \centerline{\textbf{\large{Appendix \hypertarget{Appendix}{F}: Construction of the Managerial Performance Indicator (MSI)}}}  \vspace{0.5 cm}  This text is just for the example \end{document}
120383
I have this test file which is supposed to put Hello there. near the top of the page but it does not work in so far as there is still tons of vertical space at top. How can I fix this?  \documentclass{article} \begin{document} \vspace{-10cm} Hello there. \end{document}
69815
Consider the following:  Let's say I have a dot. I would like to be able to position this dot anywhere on the page: at the corner, in the middle, anywhere.  So far, despite poring over manuals and experimenting, I can not figure out how to do this. It seems logical that there would be some system that would place a conceptual grid on the page and then allow for an exact placement within that grid.  I'm sure it exists, but I can't seem to find it.  I can make the dot, and all sorts of other shapes, but I just don't seem to have any control over where these shapes appear on the page.  I'm sure this is an obvious question and I have overlooked something.
23842
Suppose that I have a &lt;div&gt; that I wish to center in the browser's display (viewport). To do so, I need to calculate the width and height of the &lt;div&gt; element.   What should I use? Please include information on browser compatibility.
22840
I'm building an HTML UI with some text elements, such as tab names, which look bad when selected. Unfortunately, it's very easy for a user to double-click a tab name, which selects it by default in many browsers.  I might be able to solve this with a JavaScript trick (I'd like to see those answers, too) -- but I'm really hoping there's something in CSS/HTML directly that works across all browsers.
753
Sometimes, I'm getting as an input tab separated list, which is not quite aligned, for instance  var1  var2  var3 var_with_long_name_which_ruins_alignment  var2 var3   Is there an easy way to render them aligned?  var1                                      var2  var3 var_with_long_name_which_ruins_alignment  var2  var3
4132
I am familiar with research on label placement to the left or above. I tend to go with right justified with the label to the left of the field for my form designs.   However, inline placeholder text is trending and it does further reduce page clutter. Is there any research out there supporting its use? Has anyone conducted usability studies on their forms that they can share?    Research Links:
88644
In any tag's info page, the Tag Info box is overlapped with the above horizontal line. Adding some space in between them or adding margin-top to the tag info div will improve the page design.  For example, in the  tag info page.  Current UI:        Expected UI:
115468
In my large latex document, I have some figures which take a considerable height of the page (80-95%). Latex puts each of these figures alone on a page, aligned on top. I would like to have each figure aligned vertically to center. Is that possible, and if so, how? :)
3791
Why are login forms always centered on the screen? Most horizontally, some vertically also. Sites like Apple/Amazon/Adobe/Microsoft/Google/PayPal/Instagram/Twitter etc. are all centered! Is this an undocumented best practice everyone unanimously decided to use?         &ndash; Wireframes created with   Obviously it's most aesthetically pleasing, but is there any other reasons why?  Edit: Many of these sites do not support mobile either, so it wasn't done specifically for that.