css中块级元素的水平垂直居中问题

1. 为父元素添加绝对定位 position: absolute;
   为子元素添加绝对定位 position: absolute;
   子元素设置left right top bottom都置为0px
   子元素设置margin:auto;
   这里注意一定要加margin:auto; 这样才可以实现垂直水平居中

// 两个简单的父子级块级元素示例
    <div class="outer">
		<div class="inner"></div>
	</div>
//为这两个块级元素设置css样式 实现水平垂直居中
	.outer{
    		width: 200px;
    		height: 200px;
    		background-color:pink;
    		position: absolute;
    		
    	}
    	.inner{
    		width: 100px;
    		height: 100px;
    		background-color: black;
    		position: absolute;
    		top: 0;
    		left: 0;
    		bottom: 0;
    		right: 0px;
    		margin: auto;
    	}

2. 为父元素添加相对定位position: relative;
   为子元素添加绝对定位position: absolute;
   因为添加绝对定位之后是脱离文档流的，子元素默认html为父元素，移动时会参照html 需要为父元素添加相对定位 可以将父元素设置成当前元素的参照元素
   为子元素添加 margin-top:clac(50% - 子元素的高度的一半)
   margin-left:clac(50% - 子元素的宽度的一半)
   这两个属性就是为了将子元素移动到父元素的水平居中位置 因为移动的点是参照子元素的左上角 所以
   减去子元素的宽高的一半
   这两句话也可以由其他属性代替 比如transform：translate(x,y),x y 就是水平和垂直方向移动的距离
   可以自行发挥

// 两个简单的父子元素的示例
     <div class="outer">
		<div class="inner"></div>
	 </div>
//添加css样式实现inner在outer中的水平垂直居中
	 .outer02{
    		width:200px;
    		height: 200px;
    		background-color:teal;
    		position: relative; 

        }
        .inner02{
                width: 100px;
                height: 100px;
                background-color: pink;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-top: -50px;
                margin-left: -50px;
        } 

3)伸缩盒/弹性盒布局
为父元素设置
display: flex;
justify-content: space-around;
align-items: center;
这样也可以实现子元素在父元素里水平垂直居中

// 还是老样子 两个简单的父子级块级元素
    <div class="outer">
		<div class="inner"></div>
	</div>
//设置css样式
   .outer{
        	width: 200px;
        	height: 200px;
        	background-color: black;
        	display: flex;
        	justify-content: space-around;
        	align-items: center;
        }
        .inner{
        	width: 100px;
        	height: 100px;
        	background-color: pink;
        }

在网页进行布局时水平垂直居中是一个比较重要的问题，在用户的角度来看，对称的东西看起来更加舒服一些，网页也不例外，而既要水平垂直居中又要保证在不同分辨率下的网页兼容性更加完善，极端的调整方法短时间内比较快捷，但是架不住火炼。