css div居中显示
html制作网页时，经常会遇到div居中显示的问题。div的水平居中、垂直居中、文字居中等，在此做一个简单的总结，希望能有所帮助。
1.通过设置margin-left和margin-right，div水平居中；
2.通过设置text-align，文字居中；
3.通过设置position,top,left,margin-left;margin-top，水平垂直居中。
div水平居中
- 01
创建一个html文件，设置div的高度、宽度，设置div样式margin:0 auto，即可达到水平居中的效果。
div里的文字居中
- 01
文字居中只需要添加属性text-align:center即可。
div水平垂直居中
- 01
设置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的一半*/ 达到水平垂直居中的效果。
- 02
注意，margin-left和margin-top的偏移量跟div的高度和宽度相关。
赞 (0)