Multiple line Carousel Caption for Bootstrap - html

Question

I've used the Carousel Container to create a Page Header with Text centred (horizontally & vertically), as it was the easiest way to centre text over an image - refer image.
My client wants me to add a horizontal line above & below the text, as its done in this image below, but im not sure on the best way to achieve this - given everything still needs to be centred & it has to be responsive.
Here is my HTML code (excluding Navbar, as its Bootstrap);
<div class="container">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/community-group.jpg" alt="" class="center-block img-responsive" style="opacity: 0.8;">
<div class="carousel-caption">
<div class="text-center full-width"><h1>Contact Us </h1></div>
</div>
</div>
</div>
</div>
</div>
And here's the current CSS for handling the Carousel & Carousel Caption and making sure they're centred:
.full-width {
width: 100%;
}
h1 {
color: #ffffff;
font-size: 400%;
text-shadow: 2px 2px #9e9e9e;
}
.carousel-caption {
position: absolute;
top: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 100%;
vertical-align: middle;
}

Answer 1

<div class="container">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<div class="row">
<div class="col-sm-4">
<div>
<div class="col-sm-4">
<div class="text-center full-width">
<hr/>
<h1>Contact Us </h1>
<hr/>
</div>
</div>
<div class="col-sm-4">
<div>
</div>
</div>
</div>
</div>
</div>
</div>
Simple Way:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
<div id="mycarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<div class="row">
<div class="col-sm-4"><div>
<div class="col-sm-4">
<div class="text-center full-width">
<hr/>
<h1>Contact Us </h1>
<hr/>
</div>
</div>
<div class="col-sm-4"><div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 2

You can add an other class to carousel and change this carousel caption styles, whit this you have orginal carousel caption and your carousel caption.
Just change top to 50 percent and margin-top = caption height / 2
.verticalCarousel .carousel-caption {
bottom:inherit;
top: 50%;
margin-top:-150px;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
}