css居中对齐的几种方法
css居中对齐的几种方法弹性盒子position:absolutefixed+margin:auto弹性盒子与其他传统的对比:弹性盒子设置弹性容器的主轴对齐属性:justify-content:center交叉轴的对其属性:align-items:center.perent{position: absolute;display: flex;display: -w...
·
css居中对齐的几种方法
弹性盒子
设置弹性容器的
主轴对齐属性:justify-content:center
交叉轴的对其属性:align-items:center
.perent{
position: absolute;
display: flex;
display: -webkit-flex;
width: 500px;
height:500px;
justify-content: center;
align-items: center;
background: green;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.left,.right{
flex:1 1 200px;
width: 100px;
height: 100px;
background: red;
}
.middle{
flex-grow: 1;
height: 100px;
background: blue;
}
position:absolute
设置父元素position:absolute或者relative;
设置该元素:position:absolute;
left:50%;
right:50%;
margin-left:-该元素的边长0.5倍
margin-top:-该元素的边长0.5倍
.con{
position: absolute;
width: 200px;
height: 200px;
bottom: 0;
background: green;
}
.middle{
width: 100px;
height: 100px;
background: blue;
position: absolute;
left:50%;
top:50%;
margin-left: -50px;
margin-top: -50px;
}
fixed+margin:auto
设置要对齐的元素的
position:fixed;
left:0;
right:0;
top:0;
bottom: 0;
margin: auto;
.middle{
/*flex-grow: 1;*/
width: 100px;
height: 100px;
background: blue;
position: fixed;
left:0;
right:0;
top:0;
bottom: 0;
margin: auto;
}
弹性盒子与其他传统的对比:
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
更多推荐
已为社区贡献1条内容
所有评论(0)