用Flex佈局實現塊級元素垂直居中
阿新 • • 發佈:2019-02-17
塊級元素垂直居中(Flex佈局方法):
css部分:
*{padding: 0;margin: 0;}
body,html,.wrap{width: 100%;height: 100%;}
.wrap{background: yellow;display: flex;-webkit-display: flex;align-items: center;-webkit-align-items: center; justify-content:center;-webkit- justify-content:center;}
.box{width: 100px;height: 100px;background: green;}
html部分:
<div class="wrap">
<div class="box"></div>
</div>
效果圖如下:
心得:
父元素寬高不定,設定width: 100%;height: 100%,
變為彈性盒子display: flex;-webkit-display: flex,
設定水平居中justify-content:center;-webkit- justify-content:center;
設定垂直居中align-items: center;-webkit-align-items: center;
子元素設定樣式width: 100px;height: 100px;background: green;
希望能幫到小夥伴們哈~