Center two elements with CSS - css

Question

How am I able to center vertically both the form and the and div next to it? I need to be able to scroll if the container of both is smaller than the inner content height space.
HTML:
<div id="outer_1">
<div id="inner_1">
<form id="form">
<input/>
<input/>
</form>
<div id="login-request">
If you do not have a login,
<span>touch here</span>
</div>
</div>
</div>
CSS:
#outer_1 {
width: 400px;
height: 400px;
border-style: solid;
border-width: 2px;
}
#inner_1 {
width: 200px;
height: 100%;
display: table;
border-style: solid;
border-width: 2px;
border-color: red;
margin-left: auto;
margin-right: auto;
}
#form {
text-align: center;
vertical-align: middle;
}
#login-request {
text-align: center;
vertical-align: middle;
}
Please consider this JSFiddle.

Answer 1

Can't you just fix this with a float:left on both divs?
JSFiddle: http://jsfiddle.net/4vtf5cn6/6/
Added lines are marked with **, so don't just copy the below code ;)
#outer_1{
width: 400px;
height: 400px;
border-style: solid;
border-width: 2px;
}
#inner_1{
**padding-top:30px;
width: 200px;
height: 100%;
display: table;
border-style: solid;
border-width: 2px;
border-color: red;
margin-left: auto;
margin-right: auto;
}
#form{
display: table-cell;
text-align: center;
vertical-align: middle;
**float:left;
}
#login-request{
display: table-cell;
text-align: center;
vertical-align: middle;
**float:left;
}
Result:

Answer 2

try this, the form and the message both are horizontally and vertical center aligned, look at it in
http://jsfiddle.net/4vtf5cn6/10/
<div id="outer_1">
<div id="inner_1">
<form id="form">
<input/>
<input/>
<div id="login-request" class="login-request-alert">
If you do not have a Travelport Mobile Agent login,
<span class="urlink">touch here</span>
</div>
</form>
</div>
</div>
#outer_1{
width: 400px;
height: 400px;
border-style: solid;
border-width: 2px;
}
#inner_1{
padding-top:30px;
width: 200px;
height: 100%;
display: table;
border-style: solid;
border-width: 2px;
border-color: red;
margin-left: auto;
margin-right: auto;
}
#form{
display: table-cell;
text-align: center;
vertical-align: middle;
float:left;
}
#login-request{
display: table-cell;
text-align: center;
vertical-align: middle;
float:left;
}

Answer 3

An option could be percentage values for margin-top property of CSS rule. For example:
.container {
width: 150px;
height: 200px;
border: 3px solid orange;
}
.child {
/* Center horizontally */
margin-left: auto;
margin-right: auto;
/* Center vertically */
margin-top: 50%;
width: 30px;
height: 40px;
border: 3px solid yellowgreen;
}
<div class="container">
<div class="child"></div>
</div>

Answer 4

The easiest way is to add a <div>, which encloses the #form and the #login-request. Like:
<div id="outer_1">
<div id="inner_1">
<div id="enclose">
<form id="form">
<input/>
<input/>
</form>
<div id="login-request" >
If you do not have a login,
<span>touch here</span>
</div>
</div>
</div>
</div>
and in the CSS:
#enclose {
display: table-cell;
text-align: center;
vertical-align: middle;
overflow-y: auto;
}
and style the #form and the #login-request as you need it

Answer 5

try this DEMO
#form{
display: inline-block;
text-align: center;
vertical-align: middle;
}
#login-request{
display: inline-block;
text-align: center;
vertical-align: middle;
}