元素居中布局

水平居中和垂直居中

水平居中方法1(margin:0 auto):

 

 

 垂直居中方法1(table-cell + vertical-align:middle):

 

 

(以下因为在编辑器上截图显示不全,故只上代码) 

水平居中方法2(绝对定位):


  

同理对应垂直居中方法2:


  

水平居中方法3(子div浮动+相对定位):


  

同理对应垂直居中方法3:


  

水平居中方法4(flex):


  

同理垂直居中方法4:


  

 

 

转载于:https://www.cnblogs.com/btsn/p/11610436.html

你可能感兴趣的:(元素居中布局)