1. 程式人生 > >css中居中方法小結

css中居中方法小結

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中居中方法小結