使用 flexbox 重叠居中的 div？

Question

我正在尝试制作响应式 "listening" 加载器，但在尝试将所有 3 个元素居中时遇到了一些问题。

在此处查看 "clean" JSFiddle：http://jsfiddle.net/mfaeqxn9/（麦克风需要位于加载器的中央）。

这是CSS:

           body{
                background: #151515
                }

            #listenericon{
                color:#23d05f;
                font-size:82px;
            }

                .circle {
                background-color: rgba(0,0,0,0);
                border: 20px solid rgba(35,208,95,0.9);
                opacity: .9;
                border-right: 20px solid rgba(0,0,0,0);
                border-left: 20px solid rgba(0,0,0,0);
                border-radius: 999px;
                width: 200px;
                height: 200px;
                margin: 0 auto;
                -moz-animation: spinPulse 1s infinite ease-in-out;
                -webkit-animation: spinPulse 1s infinite linear;
            }

            .circle1 {
                background-color: rgba(0,0,0,0);
                border: 20px solid rgba(35,208,95,0.9);
                opacity: .9;
                border-left: 20px solid rgba(0,0,0,0);
                border-right: 20px solid rgba(0,0,0,0);
                border-radius: 999px;
                width: 120px;
                height: 120px;
                margin: 0 auto;
                position: relative;
                top: -288px;
                -moz-animation: spinoffPulse 1s infinite linear;
                -webkit-animation: spinoffPulse 1s infinite linear;
            }

            @-moz-keyframes spinPulse {
                0% {
                    -moz-transform: rotate(160deg);
                    opacity: 0;
                    box-shadow: 0 0 1px #23d05f;
                }

                50% {
                    -moz-transform: rotate(145deg);
                    opacity: 1;
                }

                100% {
                    -moz-transform: rotate(-320deg);
                    opacity: 0;
                };
            }

            @-moz-keyframes spinoffPulse {
                0% {
                    -moz-transform: rotate(0deg);
                }

                100% {
                    -moz-transform: rotate(360deg);
                };
            }

            @-webkit-keyframes spinPulse {
                0% {
                    -webkit-transform: rotate(160deg);
                    opacity: 0;
                    box-shadow: 0 0 1px #23d05f;
                }

                50% {
                    -webkit-transform: rotate(145deg);
                    opacity: 1;
                }

                100% {
                    -webkit-transform: rotate(-320deg);
                    opacity: 0;
                };
            }

            @-webkit-keyframes spinoffPulse {
                0% {
                    -webkit-transform: rotate(0deg);
                }

                100% {
                    -webkit-transform: rotate(360deg);
                };
            }

            @import url(https://fonts.googleapis.com/icon?family=Material+Icons);


            .material-icons {
              font-family: 'Material Icons';
              font-weight: normal;
              font-style: normal;
              font-size: 24px;  /* Preferred icon size */
              display: inline-block;
              width: 1em;
              height: 1em;
              line-height: 1;
              text-transform: none;
              letter-spacing: normal;
              word-wrap: normal;

              /* Support for all WebKit browsers. */
              -webkit-font-smoothing: antialiased;
              /* Support for Safari and Chrome. */
              text-rendering: optimizeLegibility;

              /* Support for Firefox. */
              -moz-osx-font-smoothing: grayscale;

              /* Support for IE. */
              font-feature-settings: 'liga';
            }

我试过翻译 50% 版本和许多其他版本，但由于它需要响应，我还没有找到合适的解决方案。我对 flexbox 没意见，但到目前为止我还没有想出如何让 div 相互重叠。

有人对此有好的解决方案吗？

Answer 1

解决方法如下（我已根据您的要求更新了代码）：

Working demo

#listenericon{
    color:#23d05f;
    font-size:82px;
    margin-top:10px;
    width:120px;
    display: block;
    position: relative;
    margin: 0 auto;
    padding-top: 78px; }

.mic{
    position: absolute;
    top: 0;
    left: 0;
    width:100%; }

Answer 2

完全响应检查运行代码，两个主要问题：如果要重叠两个 div，请使用绝对位置，并使用相对位置控制该 div，检查：Fiddle Code

     <div class="loader">
<div class="circle"></div>
<div class="circle1"><i id="listenericon" class="material-icons">mic</i></div>

  #listenericon{
    color:#23d05f;
    font-size:82px; margin:10px 0 0 0;
 }
 .loader{position:relative; float:left; width:100%; height:270px;}

使用 flexbox 重叠居中的 div？

Overlapping centered divs with flexbox?

css

flexbox