Align element to vertical center (middle), but scroll (from top of element) when taller than container

Question

I need to align a (nested) element to the vertical center of its container element, but when the nested element becomes taller than the container, the container needs to scroll starting from the top of the nested content (without it extending up past the top).

I was looking for a quick solution to this, but I'm encountering a lot of noise in my search results, no matter where I look.

Ideally the solution would use Flexbox, but any and all solutions are welcome, as long as they work in ALL of the target browsers.

This needs to work in IE 11, Edge, and current versions of Firefox, Chrome, and Safari.

Please, before you mark this as a duplicate, ensure that the similar question has a clear solution for the same target browsers. Once I read comments on some of the solutions I've seen, I see they don't fit my use case.

Here's one thing I have tried, but the nested content stays centered, and extends past the upper and lower bounds of the container, instead of scrolling, when too tall:

<div class="float-container">
  <div class="float-content">
    <!-- Some content that changes height -->
  </div>
</div>

.float-container {
  margin-top: 50px;
  height: calc(100vh - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: scroll;
}

In order for us to help you better, can you please update your question so that it shows your relevant code in a [minimal, complete, and verifiable example](http://stackoverflow.com/help/mcve) in the **question itself**. External sites may be malicious, flagged by filter systems, or removed at a later stage (rendering your question useless). It would also be helpful if you could let us know what you have tried so far to solve your problem. For further information, please refer to the help article regarding [how to ask good questions](http://stackoverflow.com/help/how-to-ask). — caiovisk, Jul 09 '18 at 05:07

lalit bhakuni · Answer 1 · 2018-07-09T05:33:03.703

1

you can try margin:auto

.float-content {
    margin: auto;
    overflow:auto;
}

https://jsfiddle.net/m4tsudc7/3/

edited Jul 09 '18 at 05:33

answered Jul 09 '18 at 05:27

lalit bhakuni

607
5
15

Wow, that did it so far! Just going to run this through a few browsers to test in the morning. – BBaysinger Jul 09 '18 at 05:35
@BBaysinger the problem is resolve or not if you need to scroll container pls add `overflow:auto;` – lalit bhakuni Jul 09 '18 at 05:45

לבני מלכה · Answer 2 · 2018-07-09T05:37:30.840

Try code bellow:

.float-container{
  display: flex;
  justify-content: center;
  margin-top: 50px;
  height: calc(100vh - 100px);
  overflow-y:auto;
  }
.float-content{
margin:auto
}

<div class="float-container">
  <div class="float-content">
    Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page.
<!-- Some content that changes height -->
  </div>
</div>

You can use transform: translate(-50%,-50%);

    .float-container{
      height: calc(100vh - 100px);
      overflow-y:auto;
      }
     .float-content  { 
    width:100%
  transform: translate(-50%,-50%);
  }

<div class="float-container">
      <div class="float-content">
        Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page. Try to scroll down the page.
    <!-- Some content that changes height -->
      </div>
    </div>

The first one is close, the only problem is that the nested content gets positioned up beyond the top of the container. I have updated my question with: "and the container needs to scroll starting from the top of the nested content..." — BBaysinger, Jul 09 '18 at 05:33
see my edit and I check transform: translate(-50%,-50%); support browsers — לבני מלכה, Jul 09 '18 at 05:38

Align element to vertical center (middle), but scroll (from top of element) when taller than container

2 Answers2