首页 > 代码库 > css浮动元素居中,右边宽固定而左边宽自适应

css浮动元素居中,右边宽固定而左边宽自适应

   1、浮动元素居中

   固定宽高的情况下:

width:200px;
height: 200px;
position: absolute;
left:50%;
top:50%;
margin-left: -100px;
margin-top: -100px;

未知宽高的情况下:
width:200px;
height: 200px;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);

2、右边宽固定,左边宽自适应
html:
<div class="all">
<div class="left"></div>
<div class="right"></div>
</div>
css:
.all{
display: flex;
}
.left,.right{
height: 2px;
display: inline-block;
}
.right{
width:200px;
background: red;
}
.left{
width:calc(100% - 200px);
background: black;
}

css浮动元素居中,右边宽固定而左边宽自适应