Question

我想要四个div，一个位于屏幕两侧的中央。因此，一个div元素沿着屏幕顶部水平居中，一个在底部水平居中，两个，一个在屏幕的左侧，一个在屏幕的右侧。两者都垂直居中。我怎么能这样做？

我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            .boxes {
                position: absolute;
                width: 10px;
                height: 5px;
            }
            #top {
                top: 0;
                background-color: yellow;
            }
            #left {
                left: 0;
                background-color: green;
            }
            #right {
                right: 0;
                background-color: red;
            }
            #bottomMenu {
                bottom: 0;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <main>
            <div id="top" class="boxes"></div>          
            <div id="left" class="boxes"></div>
            <div id="right" class="boxes"></div>
            <div id="bottom" class="boxes"></div>
        </main>
    </body>
</html>

就像现在一样，我的左上角是＃top和#left，右上角是#right，左下角是#bottom。谢谢！

Answer 1

.boxes {
                position: absolute;
                width: 100px;
                height: 100px;
               
            }
            #left {
                top: calc(50% - 50px);
                background-color: yellow;

            }
            #bottom {
                left: calc(50% - 50px);
                background-color: green;
                bottom: 10px;
            }
            #top {
                right: calc(50% - 50px);
                background-color: red;
            }
            #right {
                bottom: calc(50% - 50px);
                background-color: blue;
                right: 10px;
            }

<!DOCTYPE html>
<html lang="en">
    <body>
        <main>
            <div id="top" class="boxes"></div>          
            <div id="left" class="boxes"></div>
            <div id="right" class="boxes"></div>
            <div id="bottom" class="boxes"></div>
        </main>
    </body>
</html>

Answer 2

您可以使用transform: translate css属性：

#top {
  top: 0;
  right: 50%;
  transform: translateX(50%);
  background-color: yellow;
}

#left {
  left: 0;
  bottom: 50%;
  transform: translateY(50%);
  background-color: green;
}

#right {
  right: 0;
  bottom: 50%;
  transform: translateY(50%);
  background-color: red;
}

#bottom {
  bottom: 0;
  right: 50%;
  transform: translateX(50%);
  background-color: blue;
}

<强> Working Fiddle

或

因为这些方框有固定的尺寸，你可以使用margin: auto并拉伸方框。

.boxes {
  position: absolute;
  width: 10px;
  height: 5px;
  margin: auto;    /* added */
}

#top {
  top: 0;
  left: 0;right: 0;  /* to stretch */
  background-color: yellow;
}

#left {
  left: 0;
  top: 0; bottom: 0;  /* to stretch */
  background-color: green;
}

#right {
  right: 0;
  top: 0; bottom: 0;  /* to stretch */
  background-color: red;
}

#bottom {
  bottom: 0;
  left: 0;right: 0;  /* to stretch */
  background-color: blue;
}

<强> Working Fiddle

Answer 3

使用此transform：translate X＆amp; Y

.boxes {
    position: absolute;
    width: 10px;
    height: 5px;
   }
  #top {
    background-color: yellow;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
  }

    #left {
        background-color: green;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
                #right {
        background-color: red;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
                #bottom {
        background-color: blue;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

https://jsfiddle.net/k6fhjLkx/

Answer 4

    <style>
      #top {
        top: 0;
        position : fixed;
        left : 0;
        right : 0;
        background-color: yellow;
      }
      #left {
        left: 0;
        position : fixed;
        bottom : 0;
        top : 0;
        background-color: green;
      }
      #right {
        right: 0;
        background-color: red;
        position : fixed;
        bottom : 0;
        top : 0;
      }
      #bottomMenu {
        bottom: 0;
        left: 0;
        position : fixed;
        right : 0;
        background-color: blue;
      }
    </style>

Answer 5

这是答案...... https://jsfiddle.net/rspc5zu1/

这是代码

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <style>
                html,body{height:100%; position:relative;}
                .boxes {
                    position: absolute;
                    width: 100px;
                    height: 120px;
                }
                #top {
                    top: 0;
                    background-color: blue;
                    left :0;
                    right:0;
                    margin:0 auto;
                }
                #left {
                    left: 0;
                    top:50%;
                    margin-top:-60px;
                    background-color: green;
                }
                #right {
                    right: 0;
                    top:50%;
                    margin-top:-60px;
                    background-color: red;
                }
                #bottom {
                    bottom: 0;
                    left:0;
                    right:0;
                    margin:0 auto;
                    background-color: blue;
                }
            </style>
        </head>
        <body>
            <main>
                <div id="top" class="boxes"></div>          
                <div id="left" class="boxes"></div>
                <div id="right" class="boxes"></div>
                <div id="bottom" class="boxes"></div>
            </main>
        </body>
    </html>

Answer 6

这是我使用flex

进行此操作的想法

https://jsfiddle.net/e9qhxbrs/1/

    <body>
        <main class="main-container">
            <div id="top" class="boxes"></div> 
            <div class="side-boxes">
                  <div id="left" class="boxes"></div>
                  <div id="right" class="boxes"></div>
            </div>         
            <div id="bottom" class="boxes"></div>
        </main>
</body>

的CSS

 html{
   height:100%;
   width:100%;
 }

    body{

      position:relative;
      top:0;
      right:0;
      left:0;
      bottom:0;
      height:100%;
      width:100%;

    }

        .main-container{
            position: absolute;
            top:0;
            right:0;
            left:0;
            bottom:0;
            z-index:1;
            background-color:transparent;
            display:flex;
            flex-direction:column;
            align-items:center;
            width:100%;
            justify-content:space-between;
        }
        .side-boxes{
          display:flex;
          justify-content:space-between;
          width:100%;
        }
        .boxes{
          background-color:#00f;
          height:100px;
          width:100px;
          border:2px solid #fff;
        }
        #top{
          background-color:red;
        }
        #left{
          background-color:lightgreen;
        }
         #right{
          background-color:green;
        }
           #bottom{
          background-color:blue;
        }

如何将四个div居中到屏幕两侧的中心

6 个答案:

或

的CSS