css中居中方法小結
阿新 • • 發佈:2017-10-25
item eal ive font 文字 -1 結束 str brush
---恢復內容開始---
1.文字垂直居中
.header_nav-item{ height:38px; line-height:38px; }
即文字所在模塊的高度和行高設置成一樣的!
2.塊元素垂直居中與父元素
.header_wrap{ height:80px; position:realitive; } .header_logo{ height:38px; position:absolute; top:50%; margin-top:-19px }
即父元素設置成相對定位,子元素設置成絕對定位,且子元素中top為50%,margin-top為-(負)height的一半。是一種比較經典的塊元素居中法!
3.塊元素(容器)水平居中
.header_warp{ margin: 0 auto; }
即元素上下為0,左右設置成自動!
總之是很基礎的方法,但經常用到,應該熟記!
---恢復內容結束---
css中居中方法小結