Can't figure out some CSS styling - html

Question

i have some CSS styling issues. first thing i have a from with 2 inputs and a button. the button is perfect positiond when i resize the window but the inputs dance around, why?
and het h2 this is appended when the button is pushed, the little arrow has to be always in the middle. Also the text needs to be always in the middle of the pop up, horizontal and vertical. Is this posible? and how?
here is the form:
#lname, #fname {
width: 90%;
height: 50px;
margin-top: 6%;
border-radius: 5px;
background-color: #1e2228;
color: #ddd;
border: 0px;
font-size: 2em;
position: absolute;
text-align: center;
}
#fname {
left: 40px;
top: 18px;
}
#lname {
left: 40px;
top: 84px;
}
#btn {
width: 100%;
height: 50px;
margin-top: 72px;
border-radius: 0 0 5px 5px;
background-color: #1e2228;
color: #ddd;
border: 0px;
font-size: 2em;
position: absolute;
left: 0px;
top: 128px;
}
here is the pop up window:
h2 {
margin: auto;
margin-top: 100px;
position: relative;
width: 50%;
height: 205px;
padding: 0px;
background: #2F3742;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align: center;
font-size: 2em;
color: #8092AA;
margin: 100px auto 0 auto;
padding-top: 6%;
}
h2:after {
content: '';
position: absolute;
border-style: solid;
border-width: 0 20px 20px;
border-color: #2F3742 transparent;
display: block;
width: 0;
z-index: 1;
top: -20px;
left: 355px;
}
ofcourse you have to see this in action! here you go! http://codepen.io/shiva112/pen/dGMrWB

Answer 1

Why do you use absolute positioning? It's a really mess, but just add for your input elements margin-left:5%. For your heading arrow: h2:after{left:50%; margin-left:-20px; }And if you want to center the text vertical and horizontal, you need to wrap your h2 text content in span or any other element you like. Then set your h2 element style to: { display:table; width:100%; } and his child element to: { displat:table-cell; vertical-align:middle; }