css浮動元素置中，右邊寬固定而左邊寬自適應

標籤：浮動   nbsp   ack   div   position   black   lock   inline   html   

   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浮動元素置中，右邊寬固定而左邊寬自適應