时间戳

首页 > 解决方案 > 如何根据 CSS 将两个 div 居中？

html - 如何根据 CSS 将两个 div 居中？

问题描述

我想在同一行上有两个 div，同时它们仍然位于页面的中心。我在这里尝试了这个答案，但没有帮助。这是大概的图片供参考

这是片段：

button {
  position: absolute;
  width: 200px;
  height: 200px;
}

#buttonTop {
  left: 200px;
}

#buttonLeft {
  top: 200px;
}

#buttonCenter {
  top: 200px;
  left: 200px;
}

#buttonRight {
  top: 200px;
  left: 400px;
}

#buttonBottom {
  top: 400px;
  left: 200px;
}

#zeme {
  position: relative;
  width: 600px;
  height: 600px;
  border-style: solid;
  border-width: 5px;
}

#menu {
  position: relative;
  width: 200px;
  height: 600px;
  border-style: solid;
  border-width: 5px;
}

#block_container {
  text-align: center;
}

#zeme,
#menu {
  display: inline;
}

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.middle {
  display: table-cell;
  vertical-align: middle;
}

.inner {
  margin-left: auto;
  margin-right: auto;
  width: 800px;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      <div id="block_container">
        <div id="menu">
          ahoj
        </div>

        <div id="zeme">
          <button id="buttonTop">Hello Top</button>
          <button id="buttonLeft">Hello Left</button>
          <button id="buttonCenter">Hello Center</button>
          <button id="buttonRight">Hello Right</button>
          <button id="buttonBottom">Hello Bottom</button>
        </div>
      </div>
    </div>
  </div>
</div>

我真的不知道如何在仍然居中的同时将它们放在一条线上，我会欢迎任何我能得到的帮助！

标签： htmlcss

解决方案

使用Flexbox，将框和文本放置在中心。

body {
  margin: 0;
  padding: 0;
}

.centerPlacer {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

.outer {
  outline: 1px solid red;
  height: 300px;
  width: 600px;
  display: flex;
}

.left {
  border: 1px solid black;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.right {
  flex: 1;
}

.boxes {
  position: relative;
  display: flex;
  color: white;
}

.boxleft,
.boxright,
.top,
.bottom,
.center {
  position: absolute;
  height: 100px;
  width: 100px;
}

.top {
  background: red;
  left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxright {
  right: 0;
  top: 100px;
  background: green;
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxleft {
  background: blue;
  top: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottom {
  background: orange;
  left: 100px;
  top: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.center {
  background: violet;
  top: 100px;
  left: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="centerPlacer">
  <div class="outer">
    <div class="left">
      ajoy
    </div>
    <div class="right">
      <div class="boxes">
        <div class="top">Hello Top</div>
        <div class="boxleft">Hello Left</div>
        <div class="boxright">Hello Right</div>
        <div class="center">Hello Center</div>
        <div class="bottom">Hello Bottom</div>
      </div>
    </div>
  </div>
</div>

推荐阅读