Make a div center-positioned in a wrapper div

HTML & CSS
1 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3 columns</title>
<style type="text/css">
 body{
margin:0;
padding:0;
}
#centerwrapper{
float: left;
width: 100%;
}
#centercolumn{
margin: 0 200px 0 230px;
background-color:pink;
}
 #leftcolumn{
float: left;
width: 230px; /*Width of left column*/
margin-left: -100%;
background: yellow;
}
 #rightcolumn{
float: left;
width: 200px;
margin-left: -200px;
background: green;
}
</style>
</head>
<body>
<div id="centerwrapper">
  <div id="centercolumn">
    center column
  </div>
</div>

<div id="leftcolumn">
left column
</div>

<div id="rightcolumn">right column</div>

</body>
</html>

http://dot.kr/x-test/3colsLayout.php has the code above.
I like to put the text “center column” in a new blue block of width:300px and make the blue block to be centered of the centercolumn div which is pink block.

I made the code below for it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>3 columns</title>
<style type="text/css">

body{
margin:0;
padding:0;
}

#centerwrapper{
float: left;
width: 100%;
}

#centercolumn{
margin: 0 200px 0 230px;
background-color:pink;
}

#leftcolumn{
float: left;
width: 230px; /*Width of left column*/
margin-left: -100%;
background: yellow;
}

#rightcolumn{
float: left;
width: 200px;
margin-left: -200px;
background: green;
}
</style>
</head>
<body>
<div id="centerwrapper">
  <div id="centercolumn" [COLOR="#FF0000"]style="text-align:center"[/COLOR]>
    [COLOR="#FF0000"]<div style="background-color:blue;width:300px">[/COLOR]center column[COLOR="#FF0000"]</div>[/COLOR]
  </div>
</div>

<div id="leftcolumn">
left column
</div>

<div id="rightcolumn">right column</div>

</body>
</html>

I want a new blue div block is at the center of the pink div block.
But the blue block is on the left of the pink div block.at http://dot.kr/x-test/3colsLayout1.php

How can I make a new blue div block to be centered of the pink centercolumn div block?

2

Set the blue <div> to margin:auto; and it’ll be centered.