Css解决各类居中问题

发表于2016-11-02 16:50:27

      

       CSS里实现水平居中非常容易,inline元素用text-align:center; block元素用margin:auto;就行了。


一、div中img水平居中:

{ 
  display:table;
  margin:0 auto;

 }



二、img与span水平对齐:

{
  display: flex; 
  align-items:center;
}



三、div中div水平居中(不知宽度&设置position:absolute情况下):


{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}



四、div中span垂直居中:

{
  vertical-align: middle;
}



五、Flex弹性盒子:用flex实现垂直居中(父元素body,子元素main)


body{ 
  display:flex; 
  align-items:center; 
}
main{ 
  display:flex;
  align-items:center;
  justify-content:center; 
  flex-direction:column;
}



六、position:absolute 绝对定位:实现整体居中(已知宽高度情况下)

main { 
  position: absolute;
  width: 18em;
  height: 10em;
  top: 50%;
  left: 50%;
  margin-top: -9em; 

 margin-left: -5em;

 }


本文转载自: http://www.w3cfuns.com/notes/33491/31c2bb46f4c0e379f72d5df5873d9046.html

评论(0)

请先登录后再评论,如果没有账号请先注册

发表评论