My attempts to center the button using vertical-align: middle and text-align: center have been unsuccessful, as the styling does not affect the button's position and it remains at the top.
I am puzzled by why the style is not being applied. While I can use top: 50%, it doesn't result in true centering depending on the length of text within the button.
#selectmanager-outer {
width: 200px;
height: 200px;
float: left;
box-sizing: border-box;
padding: 10px;
}
#selectmanager-inner {
height: 150px;
box-sizing: border-box;
border: 1px solid #E0E0E0;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F5F5F5), to(#FAFAFA));
background-image: -webkit-linear-gradient(#F5F5F5, #FAFAFA);
background-image: -moz-linear-gradient(#F5F5F5, #FAFAFA);
background-image: -o-linear-gradient(#F5F5F5, #FAFAFA);
background-image: linear-gradient(#F5F5F5, #FAFAFA);
padding: 10px;
}<div id='selectmanager-outer'>
<div id ='selectmanager-inner'>
<button>Very long button name to test</button>
</div>
</div>Solution: By implementing Akheel K M's solution with positioning, percentages, and transforms.
#selectmanager-outer {
width: 200px;
height: 200px;
float: left;
box-sizing: border-box;
padding: 10px;
}
#selectmanager-inner {
height: 150px;
box-sizing: border-box;
border: 1px solid #E0E0E0;
border-radius: 30px 30px;
background: #F5F5F5;
background-image: -webkit-linear-gradient(top, #F5F5F5, #FAFAFA);
background-image: -moz-linear-gradient(top, #F5F5F5, #FAFAFA);
background-image: -ms-linear-gradient(top, #F5F5F5, #FAFAFA);
background-image: -o-linear-gradient(top, #F5F5F5, #FAFAFA);
background-image: linear-gradient(to bottom, #F5F5F5, #FAFAFA);
padding: 10px;
position: relative;
}
#selectmanager-inner button {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}<div id='selectmanager-outer'>
<div id ='selectmanager-inner'>
<button>Very long button name to test</button>
</div>
</div>