CSS :flex 水平垂直置中

by on # css

只要外面div的 display設flex ,裡面div的 margin設auto ,就會水平垂直置中。
我們直接來看css(下方語法是sass)

.container
  display: flex
  width: 100%
  height: 500px
  background-color: #222
  >.box
    background-color: #afa
    // max-width: 100%
    // max-height: 100%
    width: 100px
    height: 100px
    margin: auto

下面我在CodePen有做一個範例,可參考。

CodePen, css, flex, center
comments powered by Disqus