How to Use Safe Center with Flexbox

How to use safe center with flexbox?

The safe keyword is still a working draft, and not many (if any) browsers support it yet, so to get the same effect, cross browser, use auto margins for now, which should be set on the flex item.

Updated codepen

Note, to compensate for the modal's 50px top/bottom margin, use padding on modal-container.

.modal-container
{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;                /*  changed  */
  position: fixed;
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  padding: 50px 0;                        /*  added  */
  box-sizing: border-box;                 /*  added  */
}
.modal-container > #modal
{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto 0;                         /*  changed  */
  padding: 12px;
  width: 50%;
  background-color: #333;
  cursor: pointer;
}

Centering Items with Flexbox and Overflow

Just remove the justify-content from your .container and add a margin: auto to your image.

.body {  height: 600px;}
.container {  margin: auto;  display: flex;  /* align-items: center; // no need for this anymore */  /* justify-content: center; // remove this */  border: 1px solid red;  height: 100%;  overflow: auto;}
img {  border: 5px solid black;  margin: auto;  /* add this */}

<div class="body">  <div class="container">    <img src="http://placehold.it/700x700" />  </div></div>

Flexbox align-items: center

You compare between lower case and upper case, try this https://codesandbox.io/s/dazzling-cache-dds7id?file=/index.html:246-281

How do I fix scrolling when flexbox content is vertically centered?

align-items: safe center should avoid children to go off the box .

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

safe
Used alongside an alignment keyword. If the chosen keyword means that the item overflows the alignment container causing data loss, the item is instead aligned as if the alignment mode were start.

html, body {
    height: 100%;
}
body {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    overflow: hidden;
}
.container {
    overflow-y: auto;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: safe center;
}

.content {
    border: 1px solid grey;
    background-color: lightgrey;
    padding: 10px;
    margin: 10px;
    border-radius: 10px;
}

<div class="container">
    <div class="content">
        Start of the content
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        End of the content
    </div>
</div>
<div class="container">
    <div class="content">
        Start of the content :(((
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        Middle of the content
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        End of the content
    </div>
</div>

How to center a parent div with flexbox

you can wrap that parent element, in another div and write that centering code on that wrapper for example like that

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

  width: 100%;
  height: 100vh;
  border: 3px solid red
}

.box{
  width: 100px;
  height: 100px;
  background: black;
}

<div class="wrapper">
  <div class="box"><div>
<div>

How to center element using flexbox when the div has width?

Simple solution:

Add margin: 0 auto to the .App element.

With auto margins applied on the left and right, space will be evenly distributed on both sides, centering the element.

From the specification:

§ 10.3.3 Block-level, non-replaced elements in normal
flow
If both margin-left and margin-right are auto, their used values
are equal. This horizontally centers the element with respect to the
edges of the containing block.

But if you want to use flexbox...

Apply flex properties to the container of .App.

body {
  display: flex;
  justify-content: center;
}

.App {
  width: 50%;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

<div class="App">
  <div class="container">
    <h1>Test</h1>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget ligula varius, malesuada sapien vel, suscipit diam. Proin eu porttitor mauris. Vivamus lacinia, turpis ut tincidunt luctus, neque justo tempus arcu, vel congue quam eros at ante. Aliquam lobortis mollis orci eget ultrices. Nunc vitae dolor at quam elementum dignissim.</span>
  </div>
</div>

How to Use Safe Center with Flexbox