user3550879 user3550879 - 5 months ago 8
CSS Question

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>

Answer

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>

Comments