vertical centering div without defined height and content

Question

I have a Wordpress site which I want to vertically center content in the Jumbotron div (site uses Bootstrap framework) No tables if possible as it ruins other functionality in the jumbotron.

EDIT: The child div is centered but the content inside is not

html

...
<div class="row">
    <div class="jumbotron" background-image:url('...');">
        <div id="s-text">               
            <?php echo $content ?>  (function to generate content not shown)
        </div>
    </div>    
</div>

css

.jumbotron { 
position: relative;
min-height: 600px; 
width: 100%;
border-radius: 0 !important;
margin: 0; padding: 0;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

#s-text { 
position: absolute; 
text-align: center;
margin: auto;
max-width: 60%;
top: 0; right: 0; left: 0; bottom: 0; 
transform:translateY(-50%) 
}

.jumbotron {
  position: relative;
  min-height: 600px;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0 !important;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
#s-text {
  position: absolute;
  display: inline-block;
  text-align: center;
  margin: auto;
  max-width: 60%;
  top: 50%;
  right: 0;
  left: 0;
  bottom: 0;
  transform: translateY(-50%)
}
#s-text p {
  position: relative;
  font-weight: 500;
  font-size: 1em;
  line-height: 1.4em;
  color: #fff;
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="jumbotron">
    <div id="s-text">
      <p>content content content content content content content content content content content content content content content content content content content content content</p>
    </div>
  </div>
</div>
<!-- end of s-txt-->

Ping me and lemme know if that dupe doesn't answer your question. — Praveen Kumar Purushothaman, Jun 26 '16 at 02:57
The answer provided in that question contains tables which myself (and the one asking the question in the other example) is asking not to use. I updated my question — user3550879, Jun 26 '16 at 03:04
Does this help you? [**Centering in CSS: A Complete Guide**](https://css-tricks.com/centering-css-complete-guide/) and [**Vertical align anything with just 3 lines of CSS**](http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/) — Praveen Kumar Purushothaman, Jun 26 '16 at 03:08
Problem is the content inside the div doesn't center. I can seem to get the s-text div to center but it is given a height somehow and the content sits at the top — user3550879, Jun 26 '16 at 04:06
Can you update your question with some rendered HTML, so that we can see it in a **snippet**, please? — Praveen Kumar Purushothaman, Jun 26 '16 at 13:45
Mate, can you please make a working one with all the CSS, using Snippet? — Praveen Kumar Purushothaman, Jun 26 '16 at 15:33
The `s-text` is at the centre as expected... It's the `
` you need to align. — Praveen Kumar Purushothaman, Jun 26 '16 at 16:58

vertical centering div without defined height and content

0 Answers0