1 Step to make table center in div by css

zhilun yu | December 26th, 2013

When i am designing a website, you may need a table be center in div, It may like this:

table is center in div

To realize this effect is simple, we can do like these steps:

Step 1: Use css to control table to show

Look at code below, to make a table be center in div, we should make table margin-left and margin-right style is auto.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table is center in div</title>
</head>
<style type="text/css">
#wrap{border:#333333 solid 1px; padding:20px 0px;}
#wrap table{margin-left:auto; margin-right:auto; border:#ff6600 solid 1px;}
</style>
<body>
<div id="wrap">
 <table><tr><td> Table is center in div </td></tr></table>
</div>
</body>
</html>

Then open this page by your browser, you will get result like above.

Google+