以最小和最大长度以及单个标签为中心的内容

Question

下面单标签能达到同样效果的代码吗？

规格是：

内容有最小和最大宽度。
如果视口小于内容最大宽度，内容将采用视口。
如果视口大于内容的最大宽度，内容必须居中。
边框底部始终占视口宽度的 100%。

嗯，我想这可能是不可能的，因为 centerer 和它的父项的颜色不同，所以我将删除不同颜色的条件。

.Component {
    background: #FFCC80;
    border-bottom: 1px solid #283593;
}

.Centerer {

  min-width: 100px;
  max-width: 300px;
  width: 100%;
  margin: 0 auto;
  
  /* ↓ Does not matter */
  background: #81D4FA;
  height: 40px;
}

<div class="Component">
  <div class="Centerer">
    
  </div>
</div>

Answer 1

是的，如下所示：

.Centerer {
  padding: 0 calc((100% - 300px)/2);
  min-width: 100px;
  background: 
   linear-gradient(#81D4FA 0 0) content-box, 
   #FFCC80;
  border-bottom: 1px solid #283593;
  box-sizing: border-box;
  

  height: 40px;
}

<div class="Centerer">
  some text here
</div>

以最小和最大长度以及单个标签为中心的内容

Center content with min and max length and single tag

html

css

layout