html - 垂直居中的两个 div 彼此相邻没有任何作用

Question

第一次发帖!耶! 嗨 Stackoverflow 我有一个问题。

我有一个 100% 宽度和自动高度的 div，里面有两个东西。一个文本框和一个图像。我希望两者始终彼此垂直居中，但我似乎无法找到方法!这是我的代码。

编辑:这是关于 imacshowcase 的。

HTML

<section id="responsiveshowcase">
    <h1>Services</h1>
    <div id="imacshowcase">
        <div id="imacshowcasedesc"><img  src="img/icons/code.png" alt="">
            <h1>Website Development</h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div><img class="wow animated slideInRight" src="img/imacshowcase.png" alt=""> </div>
            <br class="clearBoth" />
    <div id="macbookshowcase"><img class="wow animated slideInLeft" src="img/macbookshowcase.png" alt="">
        <div id="macbookshowcasedesc"><img src="img/icons/seo.png" alt="">
            <h1>SEO</h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div>
            <br class="clearBoth" />
    </div>
</section>

CSS

#responsiveshowcase {
    width: 100%;
    text-align: center;
    font-family: 'Raleway', sans-serif;
}

#imacshowcase {
    width: 100%;
    overflow: auto;

}

#imacshowcasedesc {
    width: 40%;
    height: 100%;
    margin-left: 10%;
    margin-right: 5%;
    float: left;
}

#imacshowcase > img {
    width: 30%;
    margin-left: 5%;
    margin-right: 10%;
}

#imacshowcasedesc > img {
    width: 10%;
    margin-bottom: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#imacshowcasedesc > h1 {
    margin-top: 0;
    font-size:1.5em
}

#macbookshowcase {
    width: 100%;
}

#macbookshowcasedesc {
    width: 40%;
    display: block;
    float: left;
    margin-left: 5%;
    margin-right: 10%;
}

#macbookshowcase > img {
    width: 30%;
    display: block;
    float: left;
    margin-left: 10%;
    margin-right: 5%;
}

#macbookshowcasedesc > img {
    width: 10%;
    margin-bottom: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#macbookshowcasedesc > h1 {
    margin-top: 0;
}

Answer 1

首先，通常最佳做法是不要对 ID 标签做太多样式设置，而将它们主要保留给 javascript 函数。请改用 css 类来设置样式。

其次，Flexbox 是你的 friend

#responsiveshowcase {
   display: flex;
   align-items: center;
}