css div居中显示

html制作网页时，经常会遇到div居中显示的问题。div的水平居中、垂直居中、文字居中等，在此做一个简单的总结，希望能有所帮助。
1.通过设置margin-left和margin-right，div水平居中；
2.通过设置text-align，文字居中；
3.通过设置position,top,left,margin-left;margin-top，水平垂直居中。
div水平居中
创建一个html文件，设置div的高度、宽度，设置div样式margin:0 auto，即可达到水平居中的效果。

div里的文字居中
文字居中只需要添加属性text-align:center即可。

div水平垂直居中
设置div的属性 width:400px; height:300px; border:1px solid blue; text-align: center; top:50%; left:50%; position:absolute; margin-left: -200px; /*width的一半*/ margin-top: -150px; /*height的一半*/ 达到水平垂直居中的效果。

注意，margin-left和margin-top的偏移量跟div的高度和宽度相关。

扩展阅读：css height auto 如何居中 ... css让div居中的几种方法 ... css div居中代码 ... 怎么让div水平居中显示 ... css如何设置div居中 ... 两个div垂直居中css ... div垂直水平居中 css ... css怎么设置居中显示 ... css如何让div中的元素居中 ...