Vertically Center and Left-Align a Column of Flex Items

Vertically center and left-align a column of flex items

justify-content aligns flex items along the main axis.

align-items aligns flex items along the cross axis, which is always perpendicular to the main axis.

Depending on the flex-direction, the main axis may be horizontal or vertical.

Since flex-direction:column means the main axis is vertical, you need to use justify-content not align-items to center the flex items.

Here's an example:

#container {  display: flex;  flex-direction: column;  justify-content: center;  height: 200px;  background-color: lightpink;}

<div id="container">  <div class="box">div 1</div>  <div class="box">div 2</div>  <div class="box">div 3</div>  <div class="box">div 4</div>  <div class="box">div 5</div></div>

Align flexbox with flex-direction:column to vertical center

Hope This Will Work For You!

.box{     border: 1px solid red;    width: 100%;    height: 300px;    display: -webkit-box;    display: -ms-flexbox;    display: flex;    /* -webkit-box-orient: vertical; */    -webkit-box-direction: normal;    -ms-flex-direction: column;    flex-direction: column;    -webkit-box-align: center;    -ms-flex-align: center;    align-items: center;    justify-content: center;
}.item{  width: 20%;  border: 1px solid green;}

<div class="box">  <div class="item">1</div>  <div class="item">2</div>  <div class="item">3</div>  <div class="item">4</div>  <div class="item">5</div></div>

Vertically center flex item in a second column

I think the simplest and easiest solution uses CSS Grid.

Create a two-column grid with your .post-tag in column two.

Then, to vertically center .post-tag, make the grid area span the entire column, and apply align-self: center to the grid item.

Here's the relevant code:

.inner-container {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: repeat(4, auto);
}

.post-tag {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
}

.inner-container {  display: grid;  grid-template-columns: 1fr auto;  grid-template-rows: repeat(4, auto);  padding: 10px;}
.post-tag {  grid-column: 2;  grid-row: 1 / -1;  align-self: center;  font-style: italic;}
.parent {  display: flex;  flex-direction: column;}
.container {  display: flex;  flex-direction: column;  border-bottom: solid 1.5px #4b0fff;  flex: 1;}

<div class="parent">  <div class="container">    <div class="inner-container">      <div>        <p>Client Here</p>      </div>      <h2>Title Here</h2>      <div>Subtitle Here</div>      <p>Sint praesentium et deleniti quod dolore dignissimos impedit. Ut autem tempore quidem debitis necessitatibus alias culpa. Delectus sunt pariatur eum aut aperiam quia et quibusdam. Nemo exercitationem iusto consequatur.</p>      <p class="post-tag">Post Tag</p>    </div>  </div>
  <div class="container">    <div class="inner-container">      <div>        <p>Client Here</p>      </div>      <h2>Title Here</h2>      <div>Subtitle Here</div>      <p>yadayada</p>      <p class="post-tag">Post Tag</p>    </div>  </div>
  <div class="container">    <div class="inner-container">      <div>        <p>Client Here</p>      </div>      <h2>Title Here</h2>      <div>Subtitle Here</div>      <p>Sint praesentium et deleniti quod dolore dignissimos impedit. Ut autem tempore quidem debitis necessitatibus alias culpa. Delectus sunt pariatur eum aut aperiam quia et quibusdam. Nemo exercitationem iusto consequatur.</p>      <p class="post-tag">Post Tag</p>    </div>  </div></div>

Vertical center when using flex

Simply add .thing { display: flex; flex-direction: column; justif-content: center; } to the CSS. flex-direction: column; will make sure that the normal block-level element behavior is maintained. justify-content: center; aligns the items at the cenetr of the main-axis (in this case the vertical axis).

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-wrap: wrap;
}

.thing {
  background: red;
  color: white;
  margin: 5px;
  text-align: center;
  flex: 1 0 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="container">
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
  <div class="thing">
    text
  </div>
</div>

Vertical Align when using flex

You can use align-items to vertically align flex items along the Cross Axis in a row layout.

Specifically, align-items: center so the flex items margin boxes are centered within the line on the cross-axis. Have a look at the updated CodeSandbox Demo

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="container">
  <h4>Workbench</h4>
  <span>☰</span>
</div>

Displaying flexbox centered but align items left like text align left

If you are open to include another wrapper in your markup, it is easy:

1. Use align-items: flex-start (or let it take the default stretch value) for the #donateList

2. Center align vertically and horizontally the new wrapper div.

See demo below (also removed some redundant styles):

main { /* ADDED */  display: flex;  align-items: center;  justify-content: center;}#donateList {  display: flex;  justify-content: center;  align-items: flex-start; /* CHANGED */  /*align-self: center;*/  flex-direction: column;  flex-wrap: wrap;}
.donateItem {  flex: 0 1 auto;  /*align-items: flex-start;  justify-content: flex-start;  align-self: center;*/}
.donateItem * {  display: inline-block;}
.donateItem p {  vertical-align: bottom;}
.donateItem img{  height: 64px;  width: 64px;}

<main>  <div id="donateList">    <div class="donateItem">      <img src="http://placehold.it/100x100">      <p>Bitcoin:</p>      <p>fkewjhf;eiwhf;iewfhwehfewifhew</p>    </div>    <div class="donateItem">      <img src="http://placehold.it/100x100">      <p>Paypal:</p>      <p>eijfhewfwifhefefewf</p>    </div>  </div></main>

Flexbox: center horizontally and vertically

I think you want something like the following.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

---

Related Topics