css中块级元素的水平垂直居中问题_div class=outer-优快云博客

本文链接：https://blog.youkuaiyun.com/HTongi/article/details/107801672

为父元素添加绝对定位 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;
    	}

为父元素添加相对定位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;
        }