行内元素的水平垂直居中问题
一下就以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;
}