React页面布局技巧

2022-01-17  本文已影响0人  陆笪_刑道荣

1.全局背景图

width: 100%;
height: 100%;
position: absolute;
background-image:url(image/splash.png);

2.仅垂直居中

父布局display: 'table-cell', verticalAlign: 'middle' 子布局什么不用写

3.垂直水平居中

父布局 display: 'flex', alignItems: 'center', justifyContent: 'center'

4.水平布局 多个元素

父布局:display: 'flex', alignItems: 'center'
子布局可用百分比来确定长度

5.垂直百分比布局 父布局加 width: 100%;height: 100%;

position: absolute

上一篇 下一篇

猜你喜欢

热点阅读