How can you center a div within a div with overflow hidden?

Question

Is there any way to get a child div to center itself within a parent div with hidden overflow and ignore the hidden overflow?

Example:

.outer {
  width: 100%;
  margin-left: 40px; /*will cause overflow*/
  overflow-x: hidden;
}
.inner {
  width: 80px;
  height: auto;
  margin: 0 auto;
  position: relative;
}

<div class="outer">
  <div class="inner">
  Hello World
  </div>
</div>

Expected Output:

----------------------------------////
| outer                          |   / <- Hidden overflow
|                                |   /
|            --------            |   /
|            |inner |            |  <- Centered
|            --------            |   /
|                                |   /
----------------------------------////

Actual Output:

----------------------------------////
| outer                          |   / <- Hidden overflow
|                                |   /
|                --------        |   /
|                |inner |        | <- not centered
|                --------        |   /
|                                |   /
----------------------------------////

If outer div didn't have overflow, the inner div should be centered horizontally but because of overflow. The inner div will be slightly off center. Is there anyway to get the inner div to not center itself with in the visible part of the outer div?

EDIT:

This question is not a duplicate. The suggested duplicate is how to center a div in another, given that there is no hidden overflow. My question is specific to centering a div within a parent div with a width that overflows and is hidden. In such a scenario the linked to proposed duplicate does not supply a satisfactory solution.

@Riskbreaker what issue do you exactly see with the structure of this question? With a little help maybe I can format it in a more appropriate format. — Frederik Petersen, Mar 05 '18 at 18:41
any code with an unsuccessful attempt to share so one can help or advice — Liam, Mar 05 '18 at 18:46
Possible duplicate of [How to horizontally center a
in another
?](https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div) — TylerH, Mar 05 '18 at 20:28
It's not a duplicate @TylerH, The link you added is for a div in a parent div that doesn't overflow out of the page. The issue raised here is specific to a parent div with a hidden overflow — Frederik Petersen, Mar 05 '18 at 20:53
@FrederikPetersen You're right, I accidentally clicked the wrong link. Your question is actually a duplicate of this one: https://stackoverflow.com/questions/10830735/center-image-in-div-with-overflow-hidden — TylerH, Mar 05 '18 at 21:00
@TylerH, although close, these are not the same. At least the accepted answer is not correct if these are duplicates. If you look at the answer in the link it uses a parent div that ignores overflow, but actually doesn't overflow. When I copy it and change the width of the parent div to actually cause overflow to occur, it shifts the image out of center. For it to answer my question, the image should have remained in center regardless of overflow or not. — Frederik Petersen, Mar 05 '18 at 21:24
@FrederikPetersen The answer is the same: apply a new stacking context to the child; the details are simply a little different. — TylerH, Mar 05 '18 at 21:49
@TylerH, Change the parent div's width to 110% in the solution from the link and you'll see that the child div no longer is in the center. It therefore doesn't answer my question — Frederik Petersen, Mar 05 '18 at 21:58
@TylerH, I can see that the question is the same or at least very similar but the solutions supplied in the question just aren't satisfactory. They require the width to be smaller than the window to work. The moment I make the parents width wider than the window, the image is no longer in center. Since that's the issue I'm looking for a solution for, the other thread just doesn't answer my question — Frederik Petersen, Mar 05 '18 at 22:06

score 1 · Accepted Answer · answered Mar 05 '18 at 19:20

I guess I understand what are you trying to do.

you can accomplish that by using fixed position and if you want to make it above all elements you can use z-index

Example

.outer-container {
  display: table;
  width: 120%;
  height: 120px;
  background: #ccc;
  overflow: hidden;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    position: fixed;
    border: 1px solid;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      overflow: hidden
    </div>
  </div>
</div>

How can you center a div within a div with overflow hidden?

1 Answers1