CSS： <div> 具有彎曲的邊緣和居中的文本（水平和垂直居中）

Question

我想要實現如下所示的功能。

在代碼中，我使用固定的高度和邊距。

沒有固定的高度和邊距怎么辦？ 如何將文字垂直居中？

注意：div之間的白色邊框僅用於說明。

碼：

 <style> .div{ width:160px; height:50px; background-color: gray; margin-top: 10px; margin-bottom: 10px; display:inline-block; text-align: center; font-size: 30px; } .bg-gray-left{ border-top-left-radius: 25px; border-bottom-left-radius: 25px; } .bg-gray-middle{ border-radius:0px; } .bg-gray-right{ border-top-right-radius: 25px; border-bottom-right-radius: 25px; } .container{ border:solid 1px gray; width: 485px; } .div:nth-child(1),.div:nth-child(2){ border-right-color: white; border-right-width: 1px; border-right-style: solid } </style> <!-- <div class="container"> --> <div class="div bg-gray-left">div 1</div> <div class="div bg-gray-middle">div 2</div> <div class="div bg-gray-right">div 3</div> <!-- </div> --> 

Answer 1

您不需要高度即可將其固定在中央。 只需添加填充並刪除邊距，即可創建所需的效果。

.div{
    width:160px;
    background-color: gray;
    display:inline-block;
    text-align: center;
    font-size: 30px;
    padding: 10px;
  }

https://jsfiddle.net/dbnrvxkq/

Answer 2

嘗試在這種情況下使用填充。

 <style> .div{ width:160px; padding: 5px 0; background-color: gray; display:inline-block; text-align: center; font-size: 30px; } .bg-gray-left{ border-top-left-radius: 25px; border-bottom-left-radius: 25px; } .bg-gray-middle{ border-radius:0px; } .bg-gray-right{ border-top-right-radius: 25px; border-bottom-right-radius: 25px; } .container{ border:solid 1px gray; width: 485px; } .div:nth-child(1),.div:nth-child(2){ border-right-color: white; border-right-width: 1px; border-right-style: solid } </style> <!-- <div class="container"> --> <div class="div bg-gray-left">div 1</div> <div class="div bg-gray-middle">div 2</div> <div class="div bg-gray-right">div 3</div> <!-- </div> --> 

Answer 3

餡很la腳。 更改大小，更改多行內容或根本不做任何事情只是時間問題，然后填充將不再能滿足您的要求。 使用flex center更可靠：

 div { height: 100px; width: 200px; display: flex; justify-content: center; align-items: center; background: aliceblue; } 

 <div> Center anything </div> 

這將需要您將所有項目包裝在一個容器中，或者沿單個軸（彈性方向：行或列）工作，但這實際上是使所有內容完全居中的最簡單方法。