下面介绍关于html元素水平居中的几种方式 1对于行内元素采用textaligncenter的方式 2采用margin0 auto来实现水平居中显示 3用table实现 4块级的元素但是通过转换成行内元素来实现块级元素的水平居中显示 5父子元素都采用相对定位，父元素left50%子元素left50%相对自己的长度减回。

通常，为避免宽度相关的bug，建议优先使用maxwidth属性设置宽度后，结合marginauto可以实现div块级元素的居中效果若仅需水平居中，只需设置marginleftauto和marginrightauto即可对于内联元素，直接设置宽度和高度的方法容易产生bug，导致内容不可见推荐使用设置内边距或外边距的方法，如设置。

最后，为了使内部的内容也能够居中显示，我们需要在DIV元素上应用textalign属性，并将其设置为center这样，DIV内部的文字和其他元素就会在水平方向上居中对齐综上所述，通过合理设置BODY和DIV的CSS属性，我们可以轻松实现固定宽度且居中的页面布局这种方法不仅简单有效，还能确保页面在不同设备上的显示。

水平居中的话一般用marginauto比较好，不过前提是宽度width必须有固定值网页居中制作过程1利用Dreamweaver工具实现页面的居中显示为了能够前后形成对比，我们先来看一下最初网页的显示效果2利用Dreamweaver打开要处理的网页，切换至“代码”查看模式，选中“Bodybody”标签部分，然后点击“属性”工具。

ltdiv class=quotcontentquot ltdiv class=quotleftquotltdiv ltdiv class=quotrightquotltdivltdiv假如页面结构是上面那样，你可以设置content的宽度，然后居中，那么不管页面多宽left和right宽度都不会变化 也就不会分开了如果不想设置content 的宽度，想做自适应的话，那就设置left和right的宽度。

width 1200pxmargin 0 auto 这样设置后，主体内容将居中显示，并且在视窗宽度小于1200像素时，主体内容将自动收缩以适应视窗宽度至于页头和页脚部分，如果希望它们的宽度覆盖整个视窗，可以将它们的宽度设为100%例如header， footer width 100% 这样设置后，页头和页脚将覆盖整个视窗。