css水平居中 和 垂直居中【学习笔记】

一、水平居中 
方法一:

　　通过给父元素添加display: flex;   justify-content: center;使其水平居中。

方法二:

　　通过给元素添加margin: 0 auto;使其水平居中。

方法三:

　　通过给父元素添加position:relative;

　　子元素添加position: absolute;  left: 50%;  transform: translateX(-50%);使其水平居中。

方法四:　　

　　通过给元素添加position:relative;  left: 50%;  transform: translateX(-50%);使其水平居中。

方法五:

　　通过给父元素添加position:fixed;

　　子元素添加position: absolute; top:0;  left: 0; bottom: 0; right: 0; margin:0 auto;使其水平居中。

 

二、垂直居中

方法一:

　　　通过给父元素添加display: flex;  align-items: center;使其垂直居中。

方法二:

　　通过给父元素添加display: flex;

　　子元素添加align-self: center使其垂直居中。

方法三:

　　通过给父元素添加position:relative;

　　子元素添加position: absolute; top: 50%;  transform: translateY(-50%);使其垂直居中。

方法四:

　　通过给元素添加position:relative; top: 50%;  transform: translateY(-50%);使其垂直居中。

方法五:

　　通过给父元素添加position:fixed;

　　子元素添加position: absolute; top:0; left: 0; bottom: 0; right: 0; margin: auto 0;使其垂直居中。