CSS/LESS allow content to grow while keeping div centered vertically - css

Question

I have a banner that ends with a triangle(arrow) that has to stay centered vertically overlapping the slideshow below it. The amount of text/content that it will accept can grow dynamically. Is there a way to style this so that as the text increases the arrow will stay centered as you see below. Below is the styling that I have to achieve the screenshot below.
.carousel {
position: relative;
margin-top:3.5em;
padding-bottom:5%;
.header {
position: absolute;
top:-2em;
left:0;
z-index: 1000;
background-color:#81C3C4;
color:white;
font-family:Lato;
}
.headerWithTag {
position: absolute;
top:-3.5em;
left:0;
z-index: 1000;
background-color:#81C3C4;
color:white;
font-family:Lato;
&:after {
content: "";
background: url(/img/styleguide/masterslider/h1_right_top.svg) no-repeat;
background-size: contain;
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
}
}
}
React Component HTML:
{headerClass} = either .header or .headerWithTag depending if there is a subtitle(h3 tag).
<div className="carousel">
<div className={headerClass}>
<h1>{headerText}</h1>
<h3>{this.props.subTitle}</h3>
</div>
<div className="slideShow">
<div>
<div ref="wrapper" className="master-slider ms-skin-default" data-qa={thisName + '_masterslider'}>
{slides}
</div>
</div>
</div>
</div>

Answer 1

So the solution is to use top:0; transform: translate(0, -50%) to shift the header up half its height from the top of the slide:
.header {
position: absolute;
top: 0;
transform: translate(0,-50%);
left:0;
z-index: 1000;
background-color:#81C3C4;
color:white;
font-family:Lato;
}
.headerWithTag {
position: absolute;
top: 0;
transform: translate(0,-50%);
left:0;
z-index: 1000;
background-color:#81C3C4;
color:white;
font-family:Lato;
&:after{
content: "";
background: url(/img/styleguide/masterslider/h1_right_top.svg) no-repeat;
background-size: contain;
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
}
}
Quick demo: http://jsfiddle.net/7ky4wvz6/1/