html - CSS:具有 flex 边缘和居中文本的 <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/