在css中怎么设置内容水平居中(搞定CSS水平垂直居中)
在css中怎么设置内容水平居中(搞定CSS水平垂直居中)出处:掘金作者:变态的小水瓶.wrapper{ background: #1890ff; height: 400px; width:400px; display: flex; justify-content: center;/*主轴方向居中*/ align-items:center;/*侧轴方向居中*/ } .content{ background: #FFB90F; /*width: 200px;*/ /*height:200px;*/ } 复制代码效果:与方案二相同。效果:与方案二相同。链接:https://juejin.cn/post/6915756476208414727
「4种方案」搞定CSS水平垂直居中关注我的头条号,分享更多的技术学习文章,我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年我花了一个月整理了一份最适合2020年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。
方案一:position绝对定位 margin负值- 适用:子元素有宽高尺寸
- 方法:父元素相对定位,子元素绝对定位,left和top定位到父元素50%,再用margin向左和向上移动子元素尺寸的一半。
.wrapper{
background: #1890ff;
height: 400px;
width:400px;
position: relative;
}
.content{
background: #FFB90F;
width: 200px;
height:200px;
position: absolute;
left: 50%;
top:50%;
margin:-100px 0 0 -100px;
}
复制代码
效果:
- 适用:子元素未知宽高(当然知道也可以啦!)
- 方法:此方法与方案一是一个道理,将margin换为transform:translate(-50%,-50%)。
.wrapper{
background: #1890ff;
height: 400px;
width:400px;
position: relative;
}
.content{
background: #FFB90F;
/*width: 200px;*/
/*height:200px;*/
position: absolute;
left: 50%;
top:50%;
transform: translate(-50% -50%);
}
复制代码
效果:
- 适用:子元素有宽高尺寸
- 方法:父元素相对定位,子元素绝对定位,left、right、top、bottom设置为0,再用margin:auto。
.wrapper{
background: #1890ff;
height: 400px;
width:400px;
position: relative;
}
.content{
background: #FFB90F;
width: 200px;
height:200px;
position: absolute;
left: 0;
right:0;
top:0;
bottom:0;
margin:auto;
}
复制代码
效果:与方案一相同。
方案四:flex弹性盒- 适用:子元素未知宽高(当然知道也可以啦!)
- 方法:父元素设置为弹性盒,justify-content和align-items都设置为center居中。
.wrapper{
background: #1890ff;
height: 400px;
width:400px;
display: flex;
justify-content: center;/*主轴方向居中*/
align-items:center;/*侧轴方向居中*/
}
.content{
background: #FFB90F;
/*width: 200px;*/
/*height:200px;*/
}
复制代码
效果:与方案二相同。
效果:与方案二相同。
链接:https://juejin.cn/post/6915756476208414727
作者:变态的小水瓶
出处:掘金