Having centered element and right-justified element in header all vertically aligned - html

Question

I'm trying to make a header for my web page with one element in the middle of the header, and one right-justified in the header.
The only ways I could think of doing it was:
Using float - JSFiddle
#centerHeader {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#socialLinks {
height: 100%;
display: inline-block;
vertical-align: middle;
float: right;
}
Using absolute positioning - JSFiddle
#centerHeader {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#socialLinks {
height: 100%;
display: inline-block;
vertical-align: middle;
position: absolute;
right: 10px;
}
The problem is that with both of these methods, the social links/images no longer are vertically aligned to the header, but rather are hugging the top of the page despite me setting them to inline-block with a height of 100%, and vertical-align: middle. (source of my reasoning for trying this vertical align method)
With the float method, there appears to be the additional problem of the centered element not actually being horizontally centered within the header, but rather placed next to the social links and centered within its own div which is not what I'm looking for.
Any pointers on how I could achieve the desired result of having a horizontally centered element with right-justified elements all inline and vertically centered would be much appreciated!

Answer 1

one solution is to add relative to the Header Wrapper and positioning the social links properly using the absolute top value.
Updated JSfiddle
#homeHeader {
height: 75px;
padding: 10px;
text-align: center;
background-color: #181818;
border-bottom: 1px solid #505050;
position:relative;
}
#socialLinks {
position: absolute;
right: 10px;
top:50%;
margin-top:-20px; //considering the social links are 40px height
}