Issue with vertical centering

Question

I'd like to use a relative div to fill it up with inline-block-elements aligned next to each other that all got the same width & same height (= squares).

So if there are n elements the relative div should get scrollable in x-direction. This is working so far as you can see in the example code below:

.outer {
  position: absolute;
  width: 100%;
  height: 100%;
}

.parent {
  position: relative;
  width: 90%;
  height: 40%;
  overflow-y: hidden;
  overflow-x: scroll;
  text-align: center;
  white-space: nowrap;
  background: red;
}

.item {
  background: yellow;
  display: inline-block;
  width: 4%;
  margin: 0% 3%;
}

.item::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

<div class="outer">
  <div class="parent">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

But now I'd like the item-elements (yellow squares) to vertical align into the red parent-div (relative div) so that the distance from top to center and from bottom to center is identical. Please have a look at this image:

Note: I do not want to change the hierarchy (keep the parent elem relative & the outer elem absolute, etc...)

How can I achieve this?

For further reference, see [Centering in CSS: A Complete Guide @ CSS-Tricks](https://css-tricks.com/centering-css-complete-guide/). — showdev, Apr 26 '18 at 19:16
@Temani Afif. For real? You marked a flex-box using answer as correct answer for this question? Had a look at **"keep the parent elem relative & the outer elem absolute, etc..."**. So `relative != flex`. — , Apr 26 '18 at 19:26
@Asker i added the flexbox solution as the second dup ;) and i can add many more if you want ... flexbox is an alternative to be considered for future reader — Temani Afif, Apr 26 '18 at 19:29
now you have all the duplicate related to centring, am limited to 5 but i can still add more. — Temani Afif, Apr 26 '18 at 19:34

score 2 · Answer 1 · answered Apr 26 '18 at 19:14

Without using css flex.

.outer {
  position: absolute;
  width: 100%;
  height: 100%;
}

.parent {
  position: relative;
  width: 90%;
  height: 40%;
  overflow-y: hidden;
  overflow-x: scroll;
  text-align: center;
  white-space: nowrap;
  background: red;
}

.item {
  background: yellow;
  display: inline-block;
  width: 4%;
  margin: 0% 3%;
  top: 50%;
  transform: translate(-50%, -50%);
  position: relative;
}

.item::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

<div class="outer">
  <div class="parent">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

showdev · Accepted Answer · 2018-04-26T20:32:25.487

0

I recommend using flexbox.
See A Complete Guide to Flexbox.

Below, align-items:center:

... defines how the browser distributes space between and around flex items along the cross-axis of their container.

.outer {
  position: absolute;
  width: 100%;
  height: 100%;
}

.parent {
  position: relative;
  width: 90%;
  height: 40%;
  overflow: hidden;
  overflow-x: scroll;
  background: red;
  display: flex;
  align-items: center;
}

.item {
  background: yellow;
  flex: 0 0 4%;
  margin: 0 3%;
}

.item::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

<div class="outer">
  <div class="parent">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

Edit

.outer {
  position: absolute;
  width: 100%;
  height: 100%;
}

.parent {
  position: relative;
  width: 90%;
  height: 40%;
  overflow-y: hidden;
  overflow-x: scroll;
  text-align: center;
  white-space: nowrap;
  background: red;
  display: flex;
  justify-content:center;
  align-items: center;
}

.item {
  background: yellow;
  flex: 0 0 4%;
  margin: 0 3%;
}

.item::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

<div class="outer">
  <div class="parent">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

edited Apr 26 '18 at 20:32

answered Apr 26 '18 at 19:11

showdev

28,454
37
55
73

I haven't changed the hierarchy. – showdev Apr 26 '18 at 19:16
1

Ok. I see your right. Thanks for your solution. But theres a problem anyway. Please have a look what happens if there are only a few (like 2x) items. The should also get centered horizontal. But they aren't - because one of the items is on the left - the other one on the right bound of the red area. So would you be so kind to edit your solution? Greetings, Tom **Edit**: Using `justify-content: center;` will move the most left item out of the scollable div bounds! – Apr 26 '18 at 19:39
I changed `justify-content` from `space-between` to `center`. However, the last child's right margin seems to be truncated, I believe because the containing block is "over-constrained". Unfortunately, I was not able to find a solution. See [Last margin / padding collapsing in flexbox / grid layout](https://stackoverflow.com/questions/38993170/last-margin-padding-collapsing-in-flexbox-grid-layout/38997047#38997047). – showdev Apr 26 '18 at 20:17
I would say the [answer from Franklin Pious](https://stackoverflow.com/a/50050412/924299) is simpler in your situation. But I find that solution also truncates the margin, this time the left margin of the first child. [Working example](https://jsfiddle.net/gnqkj607/).¯\\_(ツ)_/¯ – showdev Apr 26 '18 at 20:26
Yes, I see what you mean. If interested, see [Can't scroll to top of flex item that is overflowing container](https://stackoverflow.com/questions/33454533/cant-scroll-to-top-of-flex-item-that-is-overflowing-container) for an explanation of the issue. – showdev Apr 26 '18 at 20:40

score 0 · Answer 3 · answered Apr 26 '18 at 19:12

0

Just give the .parent element this code and it should work: (you can keep the code that you've already wrote)

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
 }

answered Apr 26 '18 at 19:12

Danijel Malinovic

121
9

But you aren't changing the hierarchy, the only thing that changes is the display property. – Danijel Malinovic Apr 26 '18 at 19:15
2

You're getting it wrong. The **display** property changes to **flex**. The **position** stays **relative** – Danijel Malinovic Apr 26 '18 at 19:18
Ok. Thanks - I had another look at the docs & they told me- your right! – Apr 26 '18 at 19:41
No problem, ambiguities can happen :). Please tick then his and my anwsers if they worked for you :) – Danijel Malinovic Apr 26 '18 at 19:56

Issue with vertical centering

3 Answers3

Edit