Vertically align content in div

Question

I have multiple slides using the jQuery slidemaster plug in, I want the text to always be centered, vertically and horizontally but I am having trouble vertically centering the text.

I have tried using margin: 0 auto; and vertical-align: middle; but it doesn't seem to be working, maybe I am using them on the wrong elements.

http://codepen.io/anon/pen/eBMoBq

.ms-slide p, .ms-slide h1 {
    color: white !important;
    text-align: center;
    margin: 0;
}
.ms-slide {
  background: rgb(213, 28, 41); 
  width: 1266px; 
  height: 138.109px; 
  left: 5084px;
}

 <div id="masterslider-md" class="master-slider ms-skin-default">
    <div class="ms-slide" style="background: #590056;">
 <div class="slide-content">
       <h1>10,795</h1><p>some text about number</p>
 </div>
    </div>
</div>

There are so many questions about vertical aligning content, did you do any searching before you asked the question? http://stackoverflow.com/search?q=vertical+align — Pete, Dec 06 '16 at 10:53

score 1 · Answer 1 · answered Dec 06 '16 at 10:37

With flexbox layout:

.ms-slide p, .ms-slide h1 {
    color: white !important;
    text-align: center;
    margin: 0;
}
.ms-slide {
  background: rgb(213, 28, 41); 
  width: 1266px; 
  height: 138.109px; 
  left: 5084px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.slide-content {
  flex: 0 1;
}

<div id="masterslider-md" class="master-slider ms-skin-default">
    <div class="ms-slide" style="background: #590056;">
 <div class="slide-content">
       <h1>10,795</h1><p>some text about number</p>
 </div>
    </div>
</div>

score 0 · Answer 2 · answered Dec 06 '16 at 10:33

set the display of parent element (.ms-slide) in to table and of child element (.slide-content) to table cell , then set vertical-align:middle for the child.

.ms-slide p, .ms-slide h1 {
    color: white !important;
    text-align: center;
    margin: 0;
}
.ms-slide {
  background: rgb(213, 28, 41); 
  width: 1266px; 
  height: 138.109px; 
  left: 5084px;
  display:table;
}
.slide-content{
  display:table-cell;
  vertical-align:middle;
  }

<div id="masterslider-md" class="master-slider ms-skin-default">
    <div class="ms-slide" style="background: #590056;">
 <div class="slide-content">
       <h1>10,795</h1><p>some text about number</p>
 </div>
    </div>
</div>

score 0 · Answer 3 · answered Dec 06 '16 at 10:36

Keep it short and simple :)

.ms-slide {
  background: rgb(213, 28, 41); 
  width: 1266px; 
  height: 138.109px; 
  left: 5084px;
  text-align: center;
}

.ms-slide p, .ms-slide h1 {
  color: white;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
}

<div id="masterslider-md" class="master-slider ms-skin-default">
    <div class="ms-slide" style="background: #590056;">
       <h1>10,795</h1><p>some text about number</p>
    </div>
</div>

score 0 · Answer 4 · answered Dec 06 '16 at 10:39

Try the old simple CSS positioning way which works across all browsers:

.ms-slide {
  background: rgb(213, 28, 41);
  width: 1266px;
  height: 138.109px;
  position: relative;
}
.slide-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 300px;
    height: 50px;
    text-align: center;
    color: #fff;
    margin: auto;
    font-size: 12px;
}
h1,
p {
  margin: 0;
}

<div id="masterslider-md" class="master-slider ms-skin-default">
  <div class="ms-slide" style="background: #590056;">
    <div class="slide-content">
      <h1>10,795</h1>
      <p>some text about number</p>
    </div>
  </div>
</div>

score 0 · Answer 5 · edited Dec 06 '16 at 10:50

simply do with this vertical-align:middle property, just try with this snippet

.ms-slide p, .ms-slide h1 {
    color: white !important;
    text-align: center;
    margin: 0;
 
}
.ms-slide {
  background: rgb(213, 28, 41); 
  width: 1266px; 
  height: 138.109px; 
  left: 5084px;
  display:table;
  
}
.slide-content{
    display: table-cell;
    vertical-align: middle;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Try file</title>
</head>
<body>
 <div id="masterslider-md" class="master-slider ms-skin-default">
    <div class="ms-slide" style="background: #590056;">
 <div class="slide-content">
       <h1>10,795</h1><p>some text about number</p>
 </div>
    </div>
</div>
</body>
</html>

Vertically align content in div

5 Answers5