css置中問題

標籤：簡單   相同   小白   absolute   img   css3   置中   方法   line   

學習過程中遇到css置中問題 , 也查閱了資料,每個人的方法都不盡相同,而且當時看懂了,過後就記混淆了;so作為一個前端小白,也來寫一下俗話說好腦子不如爛筆頭,畢竟自己知道的也不多,其實是抱著學習和交流的態度啦.話不多說,直接來(注:本文中的屬性都是在chrome瀏覽器下實驗的);

一 : 一個父盒子,一個子盒子如何置中(高度已知)

　　最簡單的一種: 就是使用定位,父盒子relative,子盒子absolute,然後子盒子left和top值各50%;在設定margin值,left和top值是本身盒子(son)寬度高度的一半,不過要是負值;看代碼(左邊代碼,右邊結果)

                                                                  

　　第二種:原理差不多看代碼就能明白(只不過css3屬性的應用)

當然還有第三種方法

 

當然以上說的是區塊層級元素,如果是行內元素的話,轉為區塊層級元素,用上面的第二種方法;第一種和第三種都不起作用;

下面示範一下

             

 

  

 

二.高度未知的情況下:(既然高度未知的話,那就呐一張圖片來代替吧);

　　1,還是用的css3屬性 ;既然用到兩次,那就說說transform,就是變換,通過 translate() 方法，元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標）;

             

 

 2.網上通用的一種方法,暫時我是背下來的

暫時就先這麼多吧,本著學習的心態;如果跟那位前輩的代碼一樣,請見諒,第一次寫部落格,吼吼

 

 

 

css置中問題