我最近接觸小程序,發(fā)現(xiàn)感覺(jué)一些資料是最常用的 ,就分享出來(lái)啦 希望對(duì)你們有幫助
1.flex流布局
使用屬性:
justify-content:center;
align-items:center;
*/justify-content 決定項(xiàng)目在主軸上的對(duì)齊方式
align-items 決定項(xiàng)目在交叉軸上的對(duì)齊方式
改變布局的橫縱軸后控制水平和垂直對(duì)齊方式的屬性改變,但控制主軸或交叉軸的對(duì)齊方式的屬性不改變。*/
2.一般布局,或者modal模態(tài)彈出框
使用屬性:
vertical-align: middle;
或
使用屬性:
text-align:center;
align-items:center;
*text-align為水平對(duì)齊方式。用于塊級(jí)元素上,設(shè)置塊級(jí)元素的內(nèi)聯(lián)元素的對(duì)齊方式。
3.塊級(jí)元素
width:400px;
margin-left:auto;
margin-right:right;
設(shè)置元素的寬度值,并令左右外邊距值為auto,瀏覽器會(huì)自動(dòng)為其分配相同的左右外邊距值,使其居中顯示。
4.圖片居中
方法1.將放置圖片的容器的布局改為
display: table-cell; text-align: center;
可以使容器內(nèi)的元素均居中顯示。效果如下:

如果需要水平垂直居中,添加
display: table-cell; text-align: center; vertical-align: middle;
效果如下:

遠(yuǎn)近互聯(lián)后端小秦整理發(fā)布,希望能對(duì)學(xué)習(xí)技術(shù)的你有所幫助
遠(yuǎn)近互聯(lián)專業(yè)提供網(wǎng)站建設(shè)、APP開(kāi)發(fā)、網(wǎng)站優(yōu)化、外貿(mào)網(wǎng)站SEO、微信運(yùn)營(yíng)的品牌整合營(yíng)銷(xiāo)服務(wù)讓客戶通過(guò)網(wǎng)絡(luò)品牌建立與網(wǎng)絡(luò)傳播提高業(yè)績(jī)。






