Center Flex Item in Container, When Surrounded by Other Flex Items

Center flex item in container, when surrounded by other flex items

Flex alignment properties work by distributing free space in the container.

Hence, there's no single-step method to center one flex item when it shares space with other items, unless the total length of the siblings is equal on both sides.

In your second example, the total length of the spans is equal on either side of the h2. As a result, the h2 is perfectly centered in the container.

.container {    display: flex;    justify-content: center;    align-items: center;    border: 1px solid red;    margin: 5px;    padding: 5px;}p { text-align: center;}p > span { background-color: aqua; padding: 5px; }

<div class="container">  <span>I'm span 1</span>  <span>I'm span 2</span>  <span>I'm span 3</span>  <h2>I'm an h2</h2>  <span>I'm span 4</span>  <span>I'm span 5</span>  <span>I'm span 6</span></div><p><span>TRUE CENTER</span></p>

Horizontal centering a flexbox item, with an uneven number of items

You're pretty close I think. I've had good success in the past just adding a "blank-element" with a flex of 1 before the logo element. The logo, and the links element should also have a flex of 1, this will ensure that they all take up the same amount of space on the screen (1/3rd)

#header {  display: flex;  justify-content: center;  align-items: center;  border: grey solid 2px;}#header-logo {  flex: 1;  margin: 0 auto;  border: black solid 2px;}#blank-Element {  flex:1;}#header-nav {  flex:1;  // other styles here
}

<header id="header" >  <div id="blank-Element"></div>   <div id="header-logo">LOGO</div>    <nav id="header-nav">      <a href="#">foo</a>      <a href="#">bar</a>      <a href="#">baz</a>    </nav></header>

Flexbox. Putting one object from row in center (without knowing the size of other objects)

This can be done in more than one way, and by adding a background color, you'll see how they behave somewhat different.

You can give the outer most items flex: 1 (and I also removed justify-content: space-between)

header {    display: flex;}.item {  flex: 1;}.item2 {
}.item3 {  flex: 1;  text-align: right;}header > div {  background: lightgray;  border: 2px dotted red;}header > .item2 {  background: lightblue;}

<header>    <div class="item">        Menu1 Menu2 Menu3 Menu4    </div>
    <div class="item2">        logo    </div>
    <div class="item3">        PL/ENG    </div></header>

Flex Box Align Top & Align Center

Flex properties applies to its child. In your case container has three child so when you apply flex properties to container it align its child but actually you need to align child of child. So you need to reapply flex property to third row's child.

Flex property align equal dimension to all its child until specified. You need to apply some height to all child of container and then flex property of third row will work.

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.container > .banner-item {
  height: 10vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.container > .row:last-child {
  display: flex;
  flex-direction: column;
  height: 65vh;
  align-items: center;
  justify-content: center;
}
.container > .row:first-child {
  height: 15vh;
}

Using 'order' property to position flex item between siblings

When there are three elements in the container:

div
h2
div

AND

the order of these elements varies in the source...

AND

you want the h2 to always be in the middle...

THEN, you can do something like this:

.container > div:first-of-type { order: 1; }
.container > h2 { order: 2; }
.container > div:last-of-type { order: 3; }

This translates to:

Regardless of the order of elements in the source,

The first div will appear first in the visual order

The h2 will appear second in the visual order

The second div will appear last in the visual order

.container {  display: flex;}.container > * {  flex: 1;  border: 1px dashed red;}h2 {   text-align: center;  margin: 0;}
.container > div:first-of-type { order: 1; }.container > h2 { order: 2; }.container > div:last-of-type { order: 3; }
p { text-align: center;}p > span { background-color: aqua; padding: 5px; }

<div class="container">  <div>  </div>  <h2>I'm an h2</h2>  <div>    <span>I'm span 1</span>    <span>I'm span 2</span>    <span>I'm span 3</span>  </div></div><div class="container">  <div>    <span>I'm span 1</span>    <span>I'm span 2</span>    <span>I'm span 3</span>  </div>  <h2>I'm an h2</h2>  <div>    <span>I'm span 4</span>    <span>I'm span 5</span>    <span>I'm span 6</span>  </div></div><div class="container">  <div>    <span>I'm span 1</span>    <span>I'm span 2</span>  </div>  <h2>I'm an h2</h2>  <div>    <span>I'm span 3</span>  </div></div><div class="container">  <div>    <span>I'm a span</span>    <span>I'm a span</span>  </div>  <div>
  </div>  <h2>    I'm an h2  </h2></div><div class="container">  <div>    <span>I'm a span</span>    <span>I'm a span</span>  </div>  <h2>    I'm an h2  </h2></div><div class="container">  <h2 class="diff-order">    I'm an h2  </h2>  <div class="diff-order">    <span>I'm a span</span>    <span>I'm a span</span>  </div>  <div class="diff-order">    <span>I'm a span</span>    <span>I'm a span</span>  </div></div><p><span>TRUE CENTER</span></p>

CSS Flex footer with 3 items, 2 at the start and the last one perfectly centered

This is working fine, but I dislike the last empty li element (use to add a 3rd columns).
Does anyone have a solution for this, without an empty element in dom ?

You can easily replace it with a pseudo element (ul:after) - you just need to make sure that you apply the style you have for li for that one as well then.

* {
    box-sizing: border-box;
    text-decoration: none;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

footer {
    background: black;
}

a {
    color: inherit;
}

ul {
    margin: 0;
    display: flex;
    height: 66px;
    list-style: none;
    align-items: center;
    justify-content: center;
}

/* pseudo element to replace empty LI at the end */
ul:after {
  content: ""; /* content property needs to be set, otherwise pseudo element is not rendered at all */
}
/* apply general LI formatting for pseudo element as well */
li, ul:after {
    flex: 1;
    color: white;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

li div {
    padding: 1em;
}

li.centered {
    justify-content: center;
}

li.centered div {
    background: lightgrey;
    color: black;
    height: 100%;
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
}

<footer>
        <ul>
            <li>
                <div>
                    <a href="http://google.fr">First</a>
                </div>
                <div>
                    <a href="http://google.fr">Second, large, full of text element</a>
                </div>
            </li>
            <li class="centered">
                <div>
                    <a href="http://google.fr">Centered element</a>
                </div>
            </li>
        </ul>
    </footer>

How do you align flex items inside a css grid to its grid lines?

Your div has w-full class. w-full is width: 100%.

Then you have nested three nested div's:

<div class="col-start-2 col-span-10 relative w-full flex flex-row h-5">
    <div class="bg-red-500 w-1/3 mr-4"></div>
    <div class="bg-yellow-300 w-1/3 mr-4"></div>
    <div class="bg-red-500 w-1/3"></div>
</div>

So the above divs placed in <div class="col-start-2 col-span-10 relative w-full flex flex-row h-5"> and they are aligned prefectly
according their parent.

So if you want to align these div's, then you need put then inside grid, not in div:

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.4/tailwind.min.css" rel="stylesheet"/>
<div class="container mx-auto">
  
  <div class="grid gap-4 grid-cols-12 h-40 my-5">
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
     <div class="bg-blue-300"></div>
    
      <div class="col-start-2 col-span-5 bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      <div class="bg-green-300"></div>
      <div class="bg-blue-300"></div>
      
      <div class="col-start-2 col-span-4 bg-red-500">1</div>
      <div class="col-span-2 bg-yellow-300">2</div>
      <div class="col-span-2 bg-red-500">3</div>
  </div>

  
</div>

Center text over an image in flexbox

To center text over an image you don't need flexbox. Just use CSS positioning properties.

.height-100vh {
    height: 100vh;
    position: relative;               /* establish nearest positioned ancestor for
                                         absolute positioning */
}

.text {
    position: absolute;  
    left: 50%;                        /* horizontal alignment */
    top: 50%;                         /* vertical alignment */
    transform: translate(-50%, -50%); /* precise centering; see link below */
}

body {  margin: 0px;}
.height-100vh {  height: 100vh;  display: flex;           /* establish flex container */  flex-direction: column;  /* stack flex items vertically */  position: relative;      /* establish nearest positioned ancenstor for absolute positioning */}
.text {  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  color: white;  font-weight: bold;}
.center-aligned {  display: flex;  align-items: center;  justify-content: center;}

<section class="height-100vh center-aligned">  <img class="background-image" src="http://vignette2.wikia.nocookie.net/uncyclopedia/images/f/f8/Stand-out-in-the-crowd-300x300.jpg/revision/latest?cb=20090904155448" />  <div class="text">SOME TEXT</div></section>

Center Flex Item in Container, When Surrounded by Other Flex Items