有关元素的水平或者垂直居中问题

行内元素的水平垂直居中问题
一下就以div 与 span为例进行实现
为父元素添加text-align：center；属性以及属性值
并为子元素设置line-height：与父元素同高；
就可实现水平垂直居中
text-align：center；实现子元素的水平居中
子元素的line-height：与父元素同高 可以实现在父元素中垂直居中
两者的叠加使用就实现水平垂直居中

// 块级元素嵌套行内元素
    <div>
        <span>君不见黄河之水天上来</span>
    </div>
 //添加css样式
  div {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            text-align: center;
        }
        
        span {
            line-height: 200px;
        }

块级元素水平或者垂直居中

为需要水平居中的块级元素设置 marign：0 auto就可以实现水平居中

// 两个简单的父子级块级元素
    <div class="outer">
        <div class="inner"></div>
    </div>
//为两个元素添加样式
  .outer {
            width: 200px;
            height: 200px;
            background-color: bisque;
        }
        
        .inner {
            width: 100px;
            height: 100px;
            background-color: black;
}

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

//实现水平居中的示例
    <div class="outer">
        <div class="inner"></div>
    </div>
 .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;
        }

伸缩盒/弹性盒布局
为父元素设置
display: flex;
justify-content: space-around;
这样也可以实现子元素在父元素里水平居中
若将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;
        }