Home Ask Login Register

Developers Planet

Your answer is one click away!

Karolina Ticha February 2016

Aligning two flex items: one to the top, the other centered

How to achieve this?

enter image description here

#top must be always at the top and fill 100% width of wrapper.

#center must be placed in the center - vertically and horizontally.

#wrap {
  display: flex;
  flex-direction: column;
  background: #D8D8D8;
  height: 400px;
  align-content: center;
}
#top {
  background: #F5A623;
  width: 100%;
}
#center {
  background: #4A90E2;
  align-self: center;
}

edit: I've found only solutions that centers div. But I don't know how to place something at to the top and something to the center.

Answers


Michael_B February 2016

In order to perfectly center the #center element in the flex container, while having another element at the top, there are two ways you could do this:

  1. Introduce a third ("phantom") element to create equal balance, or
  2. Absolutely position the #center element.

It would be easy to center the #center element if it were the only flex item in the container. Either of the following two methods would suffice:

#wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

OR

#center {
    margin: auto;
}

Except there is a second flex item in the container occupying space at the top. This means that the centering methods above – which are based on the distribution of free space in the container – won't be precise. They will center the #center element inside the remaining space, but not inside the entire space (because #top is occupying space which, as a result, is excluded from the calculation).

In the following demo, #center is perfectly centered in the gray area, but not in the entire flex container, which includes the orange area:

DEMO 1

The #center element looks centered, and that may be enough for your purposes, but it's not precisely centered. It's off vertically by 50px, which is the height of the #top element.

So another centering method must be used that takes the #top space into consideration.


Method #1: Introduce a third "phantom" element for equal balance

This method involves creating a third flex item with the same height as #top. We place this new item on the other side of #center to create an equal balan


matt February 2016

You can do this with one extra element in your HTML which will basically fill the space after the header. Then your content can be centered within that filled space.

#container {
  display: flex;
  flex-flow: flex-wrap;
  flex-direction: column;
  
  border: 1px solid black;
  height: 150px;
  justify-content: flex-start;
}

#content {
  background: yellow;
  height: 100%;
  display: flex;
  justify-content: center;
}

#centered {
  background: red;
  height: 30px;
  align-self: center;
}

#header {
  background: green;
}
<div id="container">
  <div id="header">This is footer content.
  </div>
  <div id="content">
    <div id="centered">
      This is centered content.
    </div>
  </div>
</div>

Post Status

Asked in February 2016
Viewed 1,760 times
Voted 8
Answered 2 times

Search




Leave an answer


Quote of the day: live life