居中對齊在css中有很多種方式滴肿,主要的分為以下幾種:
一感帅、水平對齊
1廊散、行內元素居中對齊:text-align:center;
2械拍、塊級元素居中對齊:margin: 0 auto;
3、使用FLEX布局:
? ? a.橫向:
? ? ? ? flex-direction: row; justify-content: center;
? ? b.縱向:
? ? ? ? flex-direction: column; align-items: center;
4涮因、固定高度時的垂直居中:
position: relative; top: 0; left: 0; right: 0; bottom: 0; margin: auto 0;
二废睦、垂直對齊
1、display: inline-block; vertical-align:? middle;
2养泡、使用FLEX布局:
? ? a.橫向:
? ? ? ? flex-direction: row; align-items: center;
? ? b.縱向:
? ? ? ? flex-direction: column; justify-content: center;
3嗜湃、有固定高度時的垂直居中:
position: relative; top: 0; left: 0; right: 0; bottom: 0; margin: auto 0;