Can I use? http://caniuse.com/ Less http://lesscss.org Cool Libraries Bootstrap from Twitter Jetstrap
这是一个创建于 1907 天前的主题，其中的信息可能已经有所发展或是发生改变。
不使用 position：absolute，如何把元素放在两个 div 中间？ 比如说把图中乔氏家的 h3 标签放在上下两个 div 中间。
<!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"> 168</span> </li> <li class="product-similar"> <span class="product-similar-text">看相似</span> </li> </ul> </div> </div> </body> </html>  | 1 seki 2020-10-06 15:34:40 +08:00 为什么不用？ |
 | 3 jjplay 2020-10-06 15:57:52 +08:00 |
 | 4 zhangkunduanfei 2020-10-06 16:05:31 +08:00 单纯放中间的话 中间那个 div display：flex，然后 justify-content 和 align-items 给 center 就可以 |
 | 6 nurupo OP @zhangkunduanfei 不是要居中的效果，不过还是谢谢了 |
 | 7 zachlhb 2020-10-06 16:45:12 +08:00 via Android margin 设置水平居中，line-height 设置垂直居中 |
 | 8 MiracleKagari 2020-10-06 17:30:39 +08:00 via Android brand float，title margin top， |
 | 9 chnwillliu 2020-10-16 06:58:41 +08:00 via Android 负 margin 正解 |
Select Language