我如何在 css 中水平居中 div 个元素？

Question

如何让 div 元素水平居中，所以当我更改浏览器的宽度时，最后的 div 会变成 css?

所以：

---||||-||||-||||---

--------||||--------

当我写的时候：

<div style="float: left; position: relative; left: 50%;">
  <div style="float: left; position: relative; left: -50%;">
    <div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
    <div style="width:315px; height:340px; float: left; margin-top: 10px; margin-bottom: 10px;">Text</div>
    ...
  </div>
</div>

然后一个元素往下走后，所有div个元素往左边走

Answer 1

创建一个 100% 给定区域的容器 <div>。然后将每个 <div> 在容器内的宽度设置为 % 和 float: left;。它们会并排堆叠，直到放不下并换到下一行。

.container {
  width: 100%;
}
.three {
  width: 33%;
  min-width: 225px;
  float: left;
  border: 1px solid black;
}

<div class="container">
  
  <div class="three">
    <p>Something</p>
  </div>
  
  <div class="three">
    <p>Something</p>
  </div>
  
  <div class="three">
    <p>Something</p>
  </div>
  
</div>

运行片段。

Answer 2

我建议在元素上使用 display: inline-block，然后在容器上使用 text-align: center 来处理您想要的居中：

我清理了你的 HTML 但这是基本的 HTML 格式，其中包含 container class 和多个（任意数量）block class DIV：

<div class="container">
    <div class="block">Text</div>
    <div class="block">Text</div>
    <div class="block">Text</div>
</div>

CSS修改块的显示设置和容器的文本对齐方式：

div.block { 
  display: inline-block; /* this changes the elements to behave more like inline elements (think <span>s) */
  width: 315px; 
  margin: 10px 0; 
  height: 340px; 
}
div.container { 
  width: 100%; 
  text-align: center;  /* this is the magic that centers the elements */
}

我整理了一个应该有助于演示此方法的小演示：JSFIDDLE

注意： 'quirk' 与 display: inline-block CSS 一起存在。它会导致元素之间出现少量 space。这可以通过多种方式删除，我的首选方法是使用注释或包装 DIV 的结束标记。（这个问题是由HTML中的元素之间的return/spaces引起的）：

<div class="container">
    <div class="block">Text</div><!--
    --><div class="block">Text</div><!--
    --><div class="block">Text</div>
</div>

<div class="container">
    <div class="block">Text</div
    ><div class="block">Text</div
    ><div class="block">Text</div>
</div>

reference for the quirk behavior

Answer 3

您可以使用媒体查询为不同的大小编写不同的 css 代码：

Media Queries

我如何在 css 中水平居中 div 个元素？

how i center div elements horizontally in css?

html

css

center