Center Div and Content Vertically

[PrinceTaz]

So I'm posting this in CSS because I think I'm having a CSS issue. Basically, I have this right now:

I'm trying to vertically center the blue box and everything inside it. I've tried line-height, vertical-align, display: inline-block, position relative and absolute. The only way that works is if I do it manually with absolute or margin. But absolute isn't responsive so that's a problem. I'm using Bootstrap from the CDN if that matters. I'm only going to include code for the first box so that it doesn't get messy. 

HTML:

<div class="container category-forums clearfix">
  <div class="container category-forums-wrap">
    <div class="container category-icon clearfix"></div>
    <div class="container forum-details-wrapper clearfix">
      <div class="container forum-details-container">
        <p class="forum-name">News Center</p>
        <p class="forum-desc">Stay up to date with all the latest news and, more importantly, familiarize yourself with the rules.</p>

        <div class="sub-forum-container container clearfix">
          <p class="sub-forums clearfix">Sub-Category 1</p>
          <p class="sub-forums clearfix">Sub-Category 2</p>
          <p class="sub-forums clearfix">Sub-Category 3</p>
        </div>
      </div>

    </div>

    <div class="container forum-threads clearfix">
      <h4>108</h4>
      <p>Threads</p>
    </div>
    
    <div class="container forum-posts clearfix">
      <h4>2000</h4>
      <p>Posts</p>
    </div>
    
    <div class="container forum-latest-posts clearfix">
      <div class="container last-avatar clearfix"></div>
      <p>Lastest thread</p>
      <p>Yesterday 3:15pm</p>
      
    </div>
  </div>
</div>

CSS:

.category-forums {
	width: 100%;
	height: 41%;
	background-color: #ecf0f1;
	padding: 0;
	border-bottom-left-radius:.25rem!important;
	border-bottom-right-radius:.25rem!important;
}
.category-icon {
	width: 7%;
	height: 100%;
	border-right: 1px dotted lightgray;
	margin: 0;
	float: left;
	line-height: 100%;
}
.category-forums-wrap {
	height: 70%;
	width: 100%;
	border: 1px dotted blue;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
}
.forum-details-wrapper {
	width: 55%;
	height: 100%;
	border-right: 1px dotted lightgray;
	margin: 0;
	float: left;
	padding: 0;

}
.forum-details-container {
	width: 100%;
	height: 100%;
	border: 1px dotted gray;
	margin: 0;
}
.forum-name {
	margin: 0;
}
.sub-forum-container {
	width: 100%;
	float: left;
	margin: 0;
}
.sub-forums {
	width: 31%;
	margin: 0;
	float: left;
}
.forum-desc {
	margin: 0;
	font-size: 1.3rem;
}
.forum-threads {
	width: 9%;
	height: 100%;
	border-right: 1px dotted lightgray;
	float: left;
	text-align: center;
	line-height: 100%;
}
.forum-posts {
	width: 9%;
	height: 100%;
	border-right: 1px dotted lightgray;
	float: left;
	line-height: 100%;

}
.forum-latest-posts {
	width: 20%;
	height: 100%;
	float: left;
}
.last-avatar {
	width: 25%;
	height: 100%;
	border-right: 1px dotted lightgray;
	float: left;
	text-align: center;
	line-height: 100%;
}

I'm having a tough time even centering the text vertically. 

[requinix]

Isn't that just a complicated way of saying that the parent row is too tall?

[PrinceTaz]

9 hours ago, requinix said:

Isn't that just a complicated way of saying that the parent row is too tall?

Well the blue box would be the child and the white is the parent. Now the parent is inside a container which needs to auto increase in height depending on how many of the parent loop through it.

[requinix]

That may be, but when I look at your screenshot I see two blue boxes with empty space below them. That means the parent is too tall, perhaps being forced by margins or padding or a tall descendant element, but tall nonetheless.

Centering the blue box inside the row will create half the space above and below it, which IMO is going to look a bit odd.

[PrinceTaz]

30 minutes ago, requinix said:

That may be, but when I look at your screenshot I see two blue boxes with empty space below them. That means the parent is too tall, perhaps being forced by margins or padding or a tall descendant element, but tall nonetheless.

Centering the blue box inside the row will create half the space above and below it, which IMO is going to look a bit odd.

Ah okay I see what you mean. So the blue border was only added so I could show you guys what needed to be centered, it won't be there for the live copy. Once the blue box is centered inside the white parent box, I'll vertically center the content inside the blue box as well. The gray parent box below it will act the same way, the only difference is the shading of the parent background. Essentially, it's a forum layout. 

[requinix]

Okay, good, I thought the blue border was weird.

Personally I wouldn't set a height directly on the row. What if the child is taller than expected? If you can rely on the child (er, children) being a certain height then that percentage height on the row can be just as easily converted to a percentage padding-top and -bottom. Which will get you centering.

[PrinceTaz]

51 minutes ago, requinix said:

Okay, good, I thought the blue border was weird.

Personally I wouldn't set a height directly on the row. What if the child is taller than expected? If you can rely on the child (er, children) being a certain height then that percentage height on the row can be just as easily converted to a percentage padding-top and -bottom. Which will get you centering.

So I should just do it manually using padding percentages? On the blue box to center it?

https://taziamoma.com/Forum/

That is where it's uploaded.

Edited June 3, 2019 by PrinceTaz

[requinix]

The .category-forums is height 41%. You could remove that and set padding-top/bottom 2%.

Alternatively, the .category-forums-wrap is height 70%, remove that and set margin-top/bottom 2%.

Or whatever values.