horizontal center align an div with flexible with

Question

I need horizontal center align an flexible width div element.

<div class="outer">
  <div class="inner"> ...this content will grow or shrink while on items changed... </div>
</div>

.outer {
  height: 500px;
  position: relative;
  background-color: gray;
}

.inner {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  border: 1px solid blue;
}

As you can see the div.inner is perfectly horizontal center aligned, but its max width will always be 50% of the div.outer while I hope the max width could be more when the content is grown.

And:

I don't want to give div.inner a fixed or min with, I hope it's flexible;
I know "max-width" does not work

Any suggestion will be appreciated!

from the duplicate: https://stackoverflow.com/a/8273750/8620333 — Temani Afif, Nov 06 '20 at 10:43
I need a flexible width box while the post you give is fixed width `div`. Gerard show me a flex layout and it solve my problem. Thanks any way! — 1Cr18Ni9, Nov 08 '20 at 02:04

score 0 · Accepted Answer · answered Nov 06 '20 at 10:36

Use a flexbox

.outer {
  height: 500px;
  background-color: gray;
  display: flex;
  justify-content: center;
}

.inner {
  align-self: flex-end;
}

<div class="outer">
  <div class="inner"> ...this content will grow or shrink while on items changed... </div>
</div>

horizontal center align an div with flexible with

1 Answers1