Want this form in perfectly center - html

Question

<form class="form-horizontal" role="form" id="contactf" action="http://titan.csit.rmit.edu.au/~e54061/wp/form-tester.php" method="post">
<div class="form-group">
<label class="control-label col-sm-2 lb" for="email">Email : </label>
<div class="col-sm-6">
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Subject : </label>
<div class="col-sm-6">
<select class="form-control col-sm-6 lb" id="subj" name="subject" required>
<option>General queries</option>
<option>Group and corporate bookings</option>
<option>Suggestion and complaints</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2 lb" for="pwd">Message : </label>
<div class="col-sm-6">
<div class="checkbox">
<textarea class="form-control" id="message" name="message" required></textarea>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
This is my form. It works fine. the thing is i am using bootstrap and i want everything in the perfect center responsive to the screen size. Please help me with this. Thanks!

Answer 1

I don't know, whether i m saying correct or not.
If we use css like,
text-align:center;
It will be affected align center both vertically and horizontally.
So there is no css for particular vertical align center.

Answer 2

you need to change dropdown text and other
<div class="panel panel-warning mypanel">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="Enter First Name">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">Subject</label>
<div class="col-sm-10">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
data-toggle="dropdown">
Topics
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Java</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Data Mining</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">
Data Communication/Networking
</a>
</li>
<li role="presentation" class="divider"></li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#">Separated link</a>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="firstname"
placeholder="Enter First Name">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
</div>