Bootstrap 2 - correct way to centre a div - html

Question

I am using Bootstrap with the Yii framework - and am trying to centre my login box in the middle of the page, but not having any joy.
My code looks like as follows:
How should I amend this to have the div display bang on in the centre?
A jsfiddle -:
http://jsfiddle.net/7946rak9/1/
<div class="row">
<?php $form = $this->beginWidget('CActiveForm', array(
'id' => get_class($model),
'enableAjaxValidation' => true,
'clientOptions' => array(
'validateOnSubmit' => true,
'validateOnChange' => false,
),
'htmlOptions' => array('class'=>'form-vertical'),
'action' => array('/frontend/user/login')
)); ?>
<div class="span2">
<?php echo $form->labelEx($model,'username'); ?>
</div>
<div class="span10">
<?php echo $form->textField($model,'username', array('class' => '')); ?>
<?php echo $form->error($model, 'username', array('class'=>'errorMessage')); ?>
</div>
</div>
<div class="row">
<div class="span2">
<?php echo $form->labelEx($model,'password'); ?>
</div>
<div class="span10">
<?php echo $form->passwordField($model,'password', array('class' => '')); ?>
<?php echo $form->error($model, 'password', array('class'=>'errorMessage')); ?>
</div>
</div>
<div class="row">
<div class="offset2 span10">
<?php echo $form->checkBox($model,'rememberMe', array('class' => 'pull-left')); ?>
<?php echo $form->labelEx($model,'rememberMe', array('style' => 'padding-left: 20px;')); ?>
<?php echo $form->error($model, 'rememberMe', array('class'=>'errorMessage')); ?>
</div>
</div>
<div class="row">
<div class="offset2 span3">
<?php echo Html::submitButton('Login', array('class' => 'btn')); ?>
</div>
</div>
<?php $this->endWidget();?>

Answer 1

have you tried adding another class "text-center" to the row div?

Answer 2

EDITED:
If you want to use Bootstrap 2's included markup, use the following to offset your div to the middle of the row.
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4 offset3">...</div>
</div>
http://getbootstrap.com/2.3.2/scaffolding.html#fluidGridSystem
Alternative
Or you could wrap all your divs with another div and then use the following markup.
<div class="wrapper">
....all you content divs here
</div>
.wrapper {
margin: 0 auto;
width: 50%;
}
http://jsfiddle.net/7946rak9/2/

Answer 3

Simply use:
margin: 0 auto;
On the div you would like to center

Answer 4

You can simply use text-align: center; on the div you want to centre
<div id="mydiv"></div>
#mydiv {
text-align: center;
}
Should do the trick. Simple Demo

Answer 5

Try defining classes span2 and span 10 with text-align: center; in your CSS if you're using a pre 2.3.0 version of Bootstrap - the .text-center method, suggested by #Wu4D wasn't added until v2.3.