如何使内部div居中？ [复制]

Posted 2023-03-05

【中文标题】如何使内部div居中？ [复制]

【英文标题】：How to center inner div? [duplicate]

【发布时间】：2019-02-16 19:18:54

【问题描述】：

我有两个 div：

<div class='container'>
  <div class='left'></div>
  <div class='center'></div>
</div>

我想将第二个 div 居中（“中心”），

并将第一个内部 div 放置在中间 div 的左侧。 我用 chrome 试了几个小时，但它不起作用。

【问题讨论】：

***.com/questions/50852584/…***.com/questions/52221686/…

【参考方案1】：

.left 
  float :left;
  width: 10%;
  margin-left: 10%;
  background: green;


.center 
  width: 60%;
  margin: 0 auto;
  background: red;


.main 
  width: 100%;
  background: yellow;

<div class="main">
  <div class="left">&nbsp;</div>
  <div class="center">&nbsp;</div>
</div>

【讨论】：

我认为 OP 希望让绿色 div 粘在红色上 - 当然与分辨率无关。

可以通过添加正确的边距来解决

如果你不知道.center的宽度怎么办？它可能有width: min-content;。

那么我猜应该求助于flex和justify-content

【参考方案2】：

这是一个没有 flexbox 的解决方案：

.main 
  text-align: center;


.main__inner 
  display: inline-block;
  position: relative;


.left 
  border: 1px solid tomato;
  position: absolute;
  right: 100%;


.center 
  border: 1px solid cyan;

<div class='main'>
  <div class='main__inner'>
    <div class='left'>left</div>
    <div class='center'>center</div>
  </div>
</div>

【参考方案3】：

要将左侧元素定位到尽可能靠左的位置，您可以使用中心元素的边距，如下所示。

边框和背景颜色是出于可见性目的，不是必需的。

.main 
  display: flex;
  justify-content: center;
  width: 100%;
  border: thin solid black;


.left 
  background-color: red;
  height: 50px;


.center 
  background-color: blue;
  height: 50px;
  margin: 0 auto;

<div class='main'>
  <div class='left'>Left</div>
  <div class='center'>Center</div>
</div>

【参考方案4】：

这是我想出的：

.main>* 
  display: inline-block;
  width: 33%;

<div class='main'>
  <div class='left'>abc</div>
  <div class='center'>def</div>
</div>

如图所示here。

另一种解决方案

此解决方案将始终将.left 放在首位。

html

<div class='main'>
  <div class='center'>def</div>
  <div class='left'>abc</div>
</div>

CSS

.main 
  display: flex;
  flex-flow: row;
  flex-wrap: no-wrap;

.main > .left 
  order: 1;

.main > .center 
  order: 2;

如果您希望您的内盒具有相同的宽度：

.main > * 
  flex-basis: 33%;

【参考方案5】：

你可以试试这个

.A 
  display: flex;
  justify-content: center;


.B 
  background-color: red;
  position: absolute;
  right: 100%;
  top: 0;


.C 
  background-color: cyan;
  position: relative;


.C,
.B 
  border-radius: 4px;
  padding: 8px 24px;

<div class="A">
  <div class="C">
    <div class="B">left text</div>
    center text
  </div>
</div>

【讨论】：

你改变了 HTML 结构。

【参考方案6】：

试试下面的

.centermax-width:300px; margin:0 auto; overflow:hidden;
.center .innerDiv float:left; width:50%;

<div class="center">
<div class="innerDiv"></div>
</div>

【讨论】：

你有没有试过在这里运行你自己的代码？