Vertically Center in Viewport Using CSS

Vertically center in viewport using CSS

you can use this as one of the solution.

   <style>
   #containter {
     height: 100vh; //vh - viewport height
     display: flex;
     flex-direction: column;
     align-items: center; 
     justify-content: center;
   }
   #content {}
  </style>

 <div id="containter">
  <div id="content">
    any text<br>
    any height<br>
    any content, for example generated from DB<br>
    everything is vertically centered
 </div>
</div>

How to vertically center a div on the available screen height?

The content wrapper must fill all the remained screen. so:

.App{
    display: flex;
    flex-direction: column;
    height: 100vh;
 }

.content-wrapper
{
    flex: 1;
    justify-content: center;
    align-items: center;
}

How to vertically center text in viewport that's wrapping around floating elements

It seems that this is impossible in general to do with only CSS, this may be possible in future levels of CSS shapes if it allows us to use shape-outside on non-floated elements. In the mean time we have to use JavaScript.

Make a div center of viewport - Horizontally and vertically

#wrapper
{
 width:500px;
 height:500px;
 margin:0 auto;
 background:#f7f7f7;
 position:absolute;
 left:50%;
 top:50%;
 margin-left:-250px;
 margin-top:-250px;
}

Demo: http://jsfiddle.net/fJtNQ/

Why is this working?

Well, basically you have an absolute positioned element inside the dom. It means that you can position it wherever you want and if you don't have a relative positioned element as parent, left and top will be the distance from the document's left/top origin.

Assigning left:50% and top:50% enables this element to be positioned always in the center of the screen, but in the center you will find the top left corner of the element.

If you have fixed width/height, you can easily 'translate' the point in the center to be actually the center of the wrapper div by giving negative margin-left and margin-top (therefore with the help of some extremely easy basic math their values will be -(width/2) and -(height/2))

EDIT

You can also easily center by using flexbox, plus (a big one) you don't need to specify w/h, i.e.:

body { /* can also be whatever container */
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}

#wrapper {
  /* whatever style u want */
}

demo: https://jsfiddle.net/00utf52o/

100% viewport vertical center with content following

The use of flexbox is your best bet as it is very concise and has good browser support. Also, it's your best bet for future-thinking as it is forming the foundation of today's modern app layout infrastructure.

The <p> being not pushed down is just done by giving a 0 height so that its effects on its container is not realized.

HTML:

<div class="container">
    <h1>
        HI
    </h1>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras neque tortor, auctor ut consectetur non, posuere a justo. Morbi nisi eros, pellentesque eget ullamcorper eu, tristique at tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent ornare odio lorem, vel fermentum est lacinia ut. Vivamus tincidunt augue scelerisque justo consectetur tincidunt. Phasellus lectus nibh, ultrices in dictum vel, pretium at nisl. Sed vehicula tortor sed facilisis accumsan. Sed cursus felis quis quam efficitur, id luctus mi aliquet. Morbi mattis gravida convallis. Sed non feugiat dolor, in gravida arcu. Morbi id dolor imperdiet, rhoncus ante convallis, varius lacus.
    </p>
</div>

CSS:

.container {
    align-items: center;
    background: red;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

.container p {
    height: 0;
}

Fiddle: https://jsfiddle.net/3ms3sggd/

A Great Flexbox Guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

How to make a vertically center of viewport?

Alright, here is your JsFiddle updated with the viewport centering - I adjusted this part of your code to look like so:

if (widthimage < i2.width) {
        $('#box').css('left', '50%');
        $('#box').css('top', '50%');
        $('#box').css('transform', 'translate(-50%,-50%)');
        $('#box').css('-webkit-transform', 'translate(-50%,-50%)');
        $("#immagine img:last-child").css('width', '100%');
    } else {
        $('#box').css('left', '50%');
        $('#box').css('top', '50%');
        $("#immagine img:last-child").css('width', '');
        $('#box').css('transform', 'translate(-50%,-50%)');
        $('#box').css('-webkit-transform', 'translate(-50%,-50%)');
    }

    $(window).resize(function () {
        $('#box').css('left', '0%');
        $("#immagine img:last-child").css('width', '100%');
        var widthimage = $("#immagine img:last-child").width();
        if (widthimage < i2.width) {
            $('#box').css('left', '50%');
            $('#box').css('top', '50%');
            $('#box').css('transform', 'translate(-50%,-50%)');
            $('#box').css('-webkit-transform', 'translate(-50%,-50%)');
            $("#immagine img:last-child").css('width', '100%');

        } else {
            $('#box').css('left', '50%');
            $('#box').css('top', '50%');
            $("#immagine img:last-child").css('width', '');
            $('#box').css('transform', 'translate(-50%,-50%)');
            $('#box').css('-webkit-transform', 'translate(-50%,-50%)');

        }

    });

What this is doing, is a nifty css trick that looks like this:

position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

This will vertically and horizontally center anything in CSS.

Here is the JsFiddle - https://jsfiddle.net/rockmandew/tvafw5Ls/17/

I will edit my answer to include how to make the lightbox stay fixed when scroll (if I understand your question correctly, you want the lightbox to stay in a fixed position if the user scrolls, but for it to center if the window/viewport is resized.)

** I lied, my current solution will make the lightbox stay in the initial position when scrolling - if you wanted it to follow the page on scroll you would add this to your code:

$(window).scroll(function() {
  $( '#box' ).css('position', 'fixed');
});

** UPDATE ** I have updated my code to include lorem ipsum at the bottom to provide a scroll - test this link, if "it doesn't work" then your question is wrong. https://jsfiddle.net/rockmandew/tvafw5Ls/18/

How to use Flex Vertical Center and Viewport Units vh?

SOLUTION - JSFIDDLE

Add flex: 0 0 auto; to the container

.flex-container {
  display: flex;
  align-items: center;
  min-height: 70vh;
  padding: 2em;
  background: gray;
  flex: 0 0 auto; /* Added rule */
}

I hope that solves the issue.

How can I vertically center a div element for all browsers using CSS?

Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and worked for recent versions of Firefox, Opera, Chrome, and Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 400px;
  /* Whatever width you want */
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h1>The Content</h1>
      <p>Once upon a midnight dreary...</p>
    </div>
  </div>
</div>

---

Related Topics