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

nurupo:不使用 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>

seki:为什么不用?

nurupo:@seki 想问问有没有什么其他的方法?

jjplay:用负 margin,我弄了个演示,方便查看 背景色改成了 pink

jsrun.net/KN6Kp

zhangkunduanfei:单纯放中间的话 中间那个 div display:flex,然后 justify-content 和 align-items 给 center 就可以

初学 Android,有什么推荐的教程?

lithium148: 希望: ①最好是图文教程。如果质量好的话,视频也行; ②易懂、清晰 ③最好不要太过时 非常感谢!

Java中的<<或>>>是什么意思? - java

This question already has answers here: Closed 7 years ago. Possible Duplicate: What does >> and >>> mean in Java?我在一些Java代码中遇到了一些陌生的符号,尽管代码可以正确编译和运行,但对于括号在此代码中的作用却感…

将谓词<T>转换为Func <T,bool> - c#

我有一个包含成员Predicate的类,希望在Linq表达式中使用该类:using System.Linq; class MyClass { public bool DoAllHaveSomeProperty() { return m_instrumentList.All(m_filterExpression); } private IEnumerable&…

菱形运算符<>是否等于<?> - java

我在util.TreeSet类中发现,其中一个构造函数正在使用具有空泛型类型的新TreeMap调用另一个构造函数。 public TreeSet(Comparator<? super E> comparator) { this(new TreeMap<>(comparator)); } new TreeMap<>是什么意思…

声纳测试用例失败 - java

我正在尝试为我的项目之一获得声纳报告。我已经运行mvn clean installRunning blah.blah.BlahTest1 Tests run: 1, Failures: 0, Errors: 0, Skipped: 0, Time elapsed: 0.016 sec Running blah.blah.BlahTest2 Tests run…