居中 - 平常我们使用margin 只可以设置margin:0 auto；表示该元素相对父元素水平居中，那么如何用margin 进行垂直居中，这是一个问题，下面就是关于margin 可以水平居中又可以垂直居中的实例 ： [解决办法如下]

自动margin实现 space-around

html:

    
	 
     
liA
	 
     
liB
	 
     
liC
	 
     
liD
	 
     
liE
    
复制代码

css方法1： ：

.g-flex {		width: 100%; height: 60px; list-style: none;		display: flex;          justify-content: space-between;             /*对应的 需要将li设置flex:1; 文本居中;行高 */        }.g-flex li{    	flex: 1; 		text-align: center;		line-height: 60px;        }        复制代码

效果样式是 li 里面的文字水平垂直居中。

css方法2 [自动margin]：

.g-flex{         width: 100%; height: 60px; list-style: none;		display: flex;/* 要想使得li里的文字内容水平垂直居中 只需要将li设置 margin:auto; */		}       g-flex li{        margin:auto;        }复制代码

效果同样也是 li 里面的文字水平垂直居中。

自动margin实现 space-between

html:

    
	
     
test1
	
     
test2
	
     
test3
	
     
test4
	
     
test5
    
复制代码

css方法1：

.test{		height: 100px; list-style: none; 		display: flex;		justify-content: space-between;	}.test li{        line-height: 100px; }	复制代码

css方法2：

.test{		height: 100px; list-style: none; 		display: flex;	}.test li{	    margin:auto ;	}li:first-child{	    margin-left: 0;	}li:last-child{		margin-right: 0;	}复制代码

当然，值得注意的是，很重要的一点： margin比(justify-content/align-self)优先级要高