CSS居中佈局總結

居中版面

 

demo

1.水平居中

-link text-align

             .child {display:inlink-block;}

             .parent {text-align:center;

             缺點：子元素寬高無法設定

    2>     方案二table+margin

             .child {display:table; margin:0 auto;}

           

             .parent {position:relative;}

.child {position:absolute;left:50%;transform:translateX(-50%);}

              優點   方案四flex+ justify-content

             .parent {display:flex;justify-content:center;}

           

             .parent {display:flex;}

             .child {margin: 0 auto;}

             缺點：flex低版本ie不支援

 

2.垂直居中

   1> 

2.垂直居中

    .parent {display:table-cell;vertical-align: middle;}

             優點：只要設定父節點，相容性好

    2>     方案二absolute+transform

):com           .child {position:absolute;top:50%;transform :translateY(-50%);}

             優點：子元素不會影響其他元素與其他元素產生影響

          

             .parent {display:flex;align -items:center;}

             優點：只要設定父節點

                方案一inline-block+text-align+table-cell +vertical-align

              .parent {text-align:center;display:table-cell;vertical-align:middle;}

   片 play   片 play  >     方案二absolute+transform

              .parent {position:relative;}

              .child { position:absolute;left:50%; 3>     方案三flex+ justify-content+align-items

              .parent {display:flex;justify-content:center;align-items:center;}

 

化

值

值

點