Vertically center content

Is there an easy way to center various types of content vertically.

Like:

  • Forms
  • Lists

I would like to do this:

  • Without centering the content horizontally
  • Without having to hard code a % I want to lower each page, I just want the vertical centering to work
  • Ideally it would center in the field below the navigation bar when there is a navigation bar

Please search the forum, this has been covered many times.

1 Like

For others finding this thread,

I found several answers on how to do this. This is the only one I have found that actually works, and I have been able to use it on every page, attaching it to ion-content.

.cust-center-ion-content3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: red;
}

These others didn’t quite center content for me.

/Forum suggestion on how to vertically center content, not best results/
.cust-center-ion-content1 {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

  width: 100%;
  height: auto;
  background: red;
}
/*Forum suggestion on how to vertically center content, not best results*/
.cust-center-ion-content2 {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  position: absolute !important;
  margin:0 auto;
  width:100%;
  background: red;
}
1 Like