CSS： <div> 具有弯曲的边缘和居中的文本（水平和垂直居中）

Question

I want to achieve something like shown below.

In the code, i am using fixed height and margin.

How do i achieve the same without the fixed height and margin? How do i center the text vertically?

Note: the white border between the div's is for illustration only.

Code:

 <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

You don't need height to fix it centrally. Just add padding and remove the margin and it should create the effect you need.

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

https://jsfiddle.net/dbnrvxkq/

Answer 2

Try to use padding in this instance.

 <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

Padding is lame. It's only ever a matter of time before the size of something changes, or something takes multiple lines, or anything at all goes wrong, and then padding will no longer do what you want. Using flex center is much more reliable:

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

 <div> Center anything </div> 

This will require you to either wrap all your items in a container, or work along a single axis (flex-direction: row or column), but it's really the most simple way to keep everything totally centered.