centering content within a centered div - html

Question

I have a div inside a div which has content in it (content created dynamically) I have gotten the child div to center vertically but can't vertically center the content inside. I am using Bootstrap.
.main {
position: relative;
min-height: 600px;
width: 100%;
margin: 0; padding: 0;
}
#content {
position: absolute;
display: inline-block;
text-align: center;
margin: auto;
max-width: 60%;
top: 50%;
right: 0;
left: 0;
bottom: 0;
transform: translateY(-50%)
}
#content p {
position: relative;
font-weight: 500;
font-size: 3.5em;
line-height: 1.25em;
color: #fff;
}
<div class="row">
<div class="main">
<div id="content">
<p> text content </p> ( this is inputted by Wordpress/post )
</div>
</div>
</div>

Answer 1

You can use a flexbox:
.main {
min-height: 300px;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
align-items: center;
}
#content {
background-color: rgba(0, 0, 0, 0.4);
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
#content p {
color: white;
}
<div class="row">
<div class="main" style="">
<div id="content">
<p> text content </p>
</div>
</div>
</div>

Answer 2

The better solution will always be to use flexbox which comes out of the box in CSS3.
Just use the following class:
#content p {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
position: relative;
font-weight: 500;
font-size: 3.5em;
line-height: 1.25em;
color: #000;
}
Alternatively,
You can put the min-height of the class "main" to a 150% instead of 600px.
.main {
position: relative;
min-height: 150%;
width: 100%;
margin: 0; padding: 0;
}
That would be the easiest solution.

Answer 3

Try adding a style something like this, bootstrap don't have that kind of functionality, its up to the user do the job.
.center {
margin: auto;
height: 65%;
}
Hope this help