centering content within a centered div

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.

css

.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;
}

html

<div class="row">
    <div class="main" style="">
        <div id="content">              
            <p> text content </p> ( this is inputted by Wordpress/post )
        </div>
    </div>    
</div>