展开全部
3种方法：
1)div+css /w3c 好处：div+css，代码编译好；不足之处：不支持ie6 7 8浏览器32313133353236313431303231363533e59b9ee7ad9431333335326261
css：
.gd,.gddiv{margin:0auto;overflow:hidden;display:block;}
.gd{width:1000px;}
.gd.gd_tr{display:table;width:950px;}
.gd.black{width:1000px;color:#fff;background:black;}
.gd.c100{width:100px;}
.gd.c50{width:50px;}
.gd.c800{width:800px;}
/*line-height的值请按需变化使用*/
.gd.red{height:100px;line-height:100px;background:red;}
.gd.pink{height:50px;line-height:50px;background:pink;}
.gd.blue{height:25px;line-height:25px;background:blue;}
.gd.cell{display:table-cell;vertical-align:middle;}
html结构代码：
red
pink
blue
black
2)使用table，好处：方便快捷，支持所有浏览器；不足之处：table维护差，可读性相比div差，修改繁琐，基本固定死难以更改，面向静态内容。
css：
.gd_table{border-collapse:collapse;}
.gd_tabletd{vertical-align:middle;height:100px;}
.gd_autotd{height:auto;}
.gd_tabletdspan.s_cell{display:block;}
.gd_tabletdspan.red{background:red;height:100px;}
.gd_tabletdspan.pink{background:pink;height:50px;}
.gd_tabletdspan.blue{background:blue;height:25px;}
.gd_tabletdspan.black{background:black;color:#fff;}
html结构代码：
3)相对定位法，好处：div+css、可调节、动静态网站均可用，支持全部浏览器；不足之处：维护性差，较为偏向静态网页。
css：
.gd_pos,.gd_posdiv{margin:0auto;overflow:hidden;height:auto;display:block;}
.gd_pos{width:1000px;}
.gd_pos.inside{width:950px;height:100px;position:relative;z-index:1;}
.gd_pos.red,.gd_pos.pink,.gd_pos.blue{position:absolute;z-index:1;top:50%;}
.gd_pos.red{width:100px;height:100px;margin-top:-50px;left:0;background:red;}
.gd_pos.pink{width:50px;height:50px;margin-top:-25px;left:100px;background:pink;}
.gd_pos.blue{width:800px;height:25px;margin-top:-13px;left:150px;background:blue;}
.gd_pos.black{color:#fff;background:black;}
html结构代码：
red
pink
blue
black
以上均供参考，图片文字均可垂直居中，希望能帮到你。
