[CSS]求问如何把元素放在两个div中间？

Question

请问乔氏家这里不用absolute还能怎么做？

        .blue {
            width: 560px;
            height: 560px;
            background-color: #4d6ada;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

        .img {
            width: 455px;
            height: 455px;
        }

        .content {
            position: relative;
            margin: 40px;
        }

        .qiaoshijia {
            position: absolute;
            border: 1px solid #cda3b1;
            background-color: #cda3b1;
            color: #ffffff;
            top: -70px;
            padding: 10px;
            font-size: 26px;
            font-weight: 400;
        }

Answer 1

我看 .blue 和 .content 都是正常文档流，如果你只是想让“方块乔”在中间，就

<div class="blue"></div>
<div class="乔"></div>
<div class="content"></div>

此时你想让“方块乔”在哪直接加外边距就可以了，比如居中，距上-30px,距下20px;

.乔{
    margin:-30px auto 20px;
}

从前端优化上讲，可以用transform:translate()，代替不必要的margin，以避免重绘或回流