初学 CSS，问一个比较基础的问题

資深大佬 : nurupo 2
不使用 position：absolute，如何把元素放在两个 div 中间？比如说把图中乔氏家的 h3 标签放在上下两个 div 中间。
初学 CSS，问一个比较基础的问题
<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         * {             margin: 0;             padding: 0;         }          .product {             width: 560px;             height: 880px;             border: 3px solid #eeeeee;             margin: 20px;         }          .product-header {             width: 560px;             height: 560px;             background-color: #f8f8f8;             display: table-cell;             text-align: center;             vertical-align: middle;         }                  .product-img {             width: 455px;             height: 455px;         }          .product-content {             position: relative;             margin: 40px;         }          .product-brand {             position: absolute;             border: 1px solid #cda3b1;             background-color: #cda3b1;             color: #ffffff;             top: -70px;             padding: 10px;             font-size: 26px;             font-weight: 400;         }          .product-title {             font-weight: 400;             display: -webkit-box;             word-break: break-word;             -webkit-line-clamp: 2;             overflow: hidden;             -webkit-box-orient: vertical;             text-overflow: ellipsis;             font-size: 40px;         }          .product-discount {             float: left;             list-style: none;             border: 1px solid #c82b50;             margin: 20px 10px 0px 0px;             font-size: 26px;             color: #c82b50;             padding: 2px;         }          .product-price {             clear: both;             float: left;             list-style: none;             line-height: 70px;             margin: 10px 0px;         }          .product-price-text {             font-size: 40px;             font-weight: 700;             color: #f10604;         }          .product-similar {             float: right;             list-style: none;             width: 160px;             height: 70px;             border: 1px solid #ffe6ea;             background-color: #ffe6ea;             border-radius: 999em;             text-align: center;             line-height: 70px;             margin: 10px 0px;         }          .product-similar-text {             font-size: 30px;             font-weight: 700;             color: #cd2852;         }     </style> </head> <body>     <div class="product">         <div class="product-header">             <img class="product-img" src="http://img.alicdn.com/imgextra/i2/3161207834/O1CN01Lwd1Q427k1MvtNOA3_!!3161207834.jpg">         </div>         <div class="product-content">             <h3 class="product-brand">乔氏家</h3>             <h1 class="product-title">风衣外套女 2020 新款中长款流行英伦风过膝春秋韩版宽松气质大衣</h1>             <ul>                 <li class="product-discount">                     <p class="product-discount-info">每 300 减 30</p>                 </li>                 <li class="product-discount">                     <p class="product-discount-info">满 128 减 10</p>                 </li>             </ul>             <ul>                 <li class="product-price">                     <span class="product-price-text">¥&nbsp;168</span>                 </li>                 <li class="product-similar">                     <span class="product-similar-text">看相似</span>                 </li>             </ul>         </div>              </div> </body> </html>
大佬有話說 (8)