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

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

遠近互聯(lián)后端小秦整理發(fā)布,希望能對學習技術的你有所幫助
遠近互聯(lián)專業(yè)提供網站建設、APP開發(fā)、網站優(yōu)化、外貿網站SEO、微信運營的品牌整合營銷服務讓客戶通過網絡品牌建立與網絡傳播提高業(yè)績。






