如何将四个 div 居中到屏幕每一侧的中心答案

【问题标题】：How to center four div's to the center of each side of the screen如何将四个 div 居中到屏幕每一侧的中心
【发布时间】：2016-09-01 15:21:39
【问题描述】：

我想要四个 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 在左下角。谢谢！

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

你可以使用transform: translatecss属性：

#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

【讨论】：

【解决方案3】：

使用这个transform: translate X & 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/

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案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;
        }

【讨论】：