How to align all the elements of a form in the center?

Question

I’m trying to align the elements of a form in the center and leave the tag label in the left part of the fields, this way:

HTML:

<form>
    <label for="info">Seu Texto</label>
                <textarea id="info"></textarea>

                <label for="cat">Seu Texto</label>

                <select class="selectpicker" id="cat">
                    <option>Mustard</option>
                    <option>Ketchup</option>
                    <option>Relish</option>
                </select>

CSS:

form {
    width: 700px;
    color: red;
}
form label {
    color: blue;
    display: inline-block;
    background: black;
}
form textarea, input, select {
    display: block;
    border-radius: 2px;
    border: none;
    background: #DDDDDD;
    clear: both;
    margin-bottom: 20px;
}

form textarea {
    width: 625px;
    padding: 10px;
    height: 212px;
}
form select {
    width: 625px;
    padding: 10px 12px;
}

The form has is inside a div of 700px, the size of it tbm is 700px. how can I align the elements (inputs,textareas, selects) and leave the Labels on the upper left?

Answer 1

Place in the fields you want to center:

margin: 0 auto;

Take a look at the example:
» Jsfiddle