Question

我试图在其右侧使用另一个div制作一个居中的div。所以左边的div是水平居中的。右侧的div直接位于居中div的右侧。我已经在很多方面尝试过不同的显示器和边距等，但我似乎无法弄明白。

欢迎所有提示！

＆＃13;

div {
  width: 100px;
  height: 100px;
  display: inline-block;
}

#left {
  left: 50%;
  background: #009a9a;
}

#right {
  background: #bbad4f;
}

＆＃13;

<div id="left"></div>
<div id="right"></div>

＆＃13;

Answer 1

您可以使用 Flexbox 和定位来执行此操作：

＆＃13;

.flex-container {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
  position: relative;
}

.flex-container > div {
  width: 100px;
  height: 100px;
}

#left {
  background: #009a9a;
}

#right {
  position: absolute;
  left: 50%; /* moved right by half of the parent's width */
  transform: translateX(50%); /* and half of its own width */
  background: #bbad4f;
}

＆＃13;

<div class="flex-container">
  <div id="left"></div>
  <div id="right"></div>
</div>

＆＃13;

无论 divs width （只要它们保持不变），此解决方案都是动态，因此没有不必要的边距或< EM>计算值（）

但是在 CSS变量 的帮助下，您可以完全动态：

＆＃13;

:root {
  --leftWidth: 200px;
}

.flex-container {
  display: flex;
  justify-content: center;
  position: relative;
}

.flex-container > div {
  width: 100px;
  height: 100px;
}

#left {
  width: var(--leftWidth);
  background: #009a9a;
}

#right {
  position: absolute;
  left: calc(50% + (var(--leftWidth)/2)); /* moved right by half of the parent's and sibling's width */
  background: #bbad4f;
}

＆＃13;

<div class="flex-container">
  <div id="left"></div>
  <div id="right"></div>
</div>

＆＃13;

Answer 2

＆＃13;

body,
html {
  height: 100%;
  font-size: 0;
}

div {
  width: 100px;
  height: 100px;
  display: inline-block;
}

#left {
  left: 50%;
  top: 50%;
  position: relative;
  transform: translate(-50%, -50%);
  background: #009a9a;
}

#right {
  background: #bbad4f;
  left: calc(50% + 100px);
  top: calc(50% + 100px);
  position: relative;
  transform: translate(calc(-50% - 100px), calc(-50% - 100px));
}

＆＃13;

<div id="left"></div>

<div id="right"></div>

＆＃13;

Answer 3

如果您不能使用转换或不知道元素大小，请参见下面的另一个示例。您可以使用flexbox或仅使用margin: auto将第一个元素居中。

.Container {
  display: flex;
  justify-content: center;
}

.Left {
  background-color: red;
  position: absolute;
  left: 100%;
  top: 0;
}

.Centered {
  background-color: cyan;
  position: relative;
}

/* Demo only */

.Centered, .Left {
  border-radius: 4px;
  padding: 8px 24px;
}

<div class="Container"> 
  <div class="Centered">
    <div class="Left">Right</div>
    Centered
  </div>
</div>

Answer 4

这是使用绝对位置。请注意，left:150px;的数量是居中div的半宽度+左div的半宽度。风格margin-left:200px;在lef div上，来自居中div的宽度。

＆＃13;

.container {
  position: relative;
}

.centered {
  width: 200px;
  background: #eeeeee;
  position: absolute;
  height: 100px;
  margin: auto;
  left: 0;
  right: 0;
}

.leftOf {
  background: #ff8800;
  position: absolute;
  left: 150px;
  margin-left: 200px;
  height: 100px;
  width: 100px
}

＆＃13;

<div class="container">
  <div class="centered"></div>
  <div class="leftOf"></div>
</div>

＆＃13;

如何让div以右边的另一个div为中心？

4 个答案: