盒模型水平垂直居中方法

1.已知宽高

  position:absolute;

  top:50%

  left:50%;

  (↓↓↓↓↓↓↓↓↓↓↓↓取自身宽高一半)

  margin-left:50%;

  margin-top:50%;

2.子模型宽高不定

  position:relactive / absolute

  top:50%;

  left:50%;

  transfrom:translate(-50%,-50%) → 偏移自身宽高的-50%;

3.table-cell

  父:dispaly:table-cell;

         vertical-align:middle;

  子:margin:0 auto;

4.弹性布局

  display:flex;

  align-items:center;

  justify-content:center;

 

posted @ 2018-03-10 15:24  阿软妹  阅读(1301)  评论(0编辑  收藏  举报