如何将

水平居中？</p>

html HTML

乐米亚

2020-03-13

如何使用CSS <div>在另一个文件中水平居中<div>？

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

</div>

第1412篇《如何将

水平居中？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点</p>

共27个回答

神乐泡芙 2020.03.13

我发现存在一个选择：

大家都说要用：

margin: auto 0;

但是还有另一种选择。为父div设置此属性。它随时随地都能完美运行：

text-align: center;

看，孩子去中心。

最后是CSS：

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}

樱小卤蛋 2020.03.13

Flex拥有超过97％的浏览器支持覆盖率，并且可能是在几行中解决此类问题的最佳方法：

#outer {
  display: flex;
  justify-content: center;
}

斯丁西门 2020.03.13

此方法也可以正常工作：

div.container {
   display: flex;
   justify-content: center; /* for horizontal alignment */
   align-items: center;     /* for vertical alignment   */
}

对于internal <div>，唯一的条件是height且width不得大于其容器的。

猴子Near 2020.03.13

这是您最想得到的。

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}

梅Tony 2020.03.13

如果内容的宽度未知，则可以使用以下方法。假设我们具有以下两个元素：

.outer - 全屏宽度
.inner -未设置宽度（但可以指定最大宽度）

假设元素的计算宽度分别为1000px和300px。进行如下：

包裹.inner内.center-helper
让.center-helper内联块; 它的大小等于.inner使其变为300px宽。
.center-helper相对于其父项向右推送50％；这会将其左侧置于500px wrt。外。
.inner相对于其父对象向左推50％；这会将其左侧放在-150px wrt。中心助手，它的左侧为500-150 = 350px wrt。外。
将溢出设置.outer为隐藏以防止水平滚动条。

演示：

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}

<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

凯ANear 2020.03.13

您可以使用display: flex外部div并水平居中添加justify-content: center

#outer{
    display: flex;
    justify-content: center;
}

或者，您可以访问w3schools-CSS flex属性以获取更多想法。

小小Eva 2020.03.13

你可以做这样的事情

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

这也将#inner垂直对齐。如果不想，请删除display和vertical-align属性。

ItachiHarry 2020.03.13

文字对齐：居中

应用text-align: center内联内容在行框中居中。但是，由于默认情况下，内部div具有默认width: 100%宽度，因此您必须设置特定宽度或使用以下之一：

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

保证金：0自动

使用margin: 0 auto是另一种选择，它更适合于较旧的浏览器兼容性。与一起使用display: table。

#inner {
  display: table;
  margin: 0 auto;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

弹性盒

display: flex行为类似于块元素，并根据flexbox模型布置其内容。它适用于justify-content: center。

请注意： Flexbox与大多数浏览器兼容，但并非与所有浏览器兼容。有关完整的最新浏览器兼容性列表，请参见此处。

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

转变

transform: translate使您可以修改CSS视觉格式模型的坐标空间。使用它，可以平移，旋转，缩放和倾斜元素。要水平居中，需要position: absolute和left: 50%。

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

`<center>` （已弃用）

标记<center>是的HTML替代text-align: center。它可以在较旧的浏览器和大多数新浏览器上运行，但是由于该功能已过时且已从Web标准中删除，因此不被认为是一种好习惯。

#inner {
  display: inline-block;
}

<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>

Pro阿飞Davaid 2020.03.13

仅水平居中

以我的经验，使框水平居中的最佳方法是应用以下属性：

容器：

应该有 text-align: center;

内容框：

应该有 display: inline-block;

演示：

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

另请参阅此小提琴！

水平和垂直居中

根据我的经验，居中的盒子最好的办法既垂直和水平是使用一个额外的容器，并应用以下属性：

外容器：

应该有 display: table;

内部容器：

应该有 display: table-cell;
应该有 vertical-align: middle;
应该有 text-align: center;

内容框：

应该有 display: inline-block;

演示：

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}

<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

另请参阅此小提琴！

米亚小小神乐 2020.03.13

最简单的方法：

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

<div id="outer">
  <div id="inner">Blabla</div>
</div>

凯JinJin 2020.03.13

例如，请参见此链接和下面的代码段：

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}

<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

如果父母下有很多孩子，那么您的CSS内容必须像fiddle上的示例一样。

HTML内容如下所示：

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

然后看小提琴上的这个例子。

Tom阳光达蒙 2020.03.13

我意识到我已经很晚了，但这是一个非常受欢迎的问题，最近我发现这里没有提到任何一种方法，因此我想将其记录在案。

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

编辑：两个元素必须具有相同的宽度才能正常运行。

小卤蛋猿阿飞 2020.03.13

另一个无需设置元素宽度的解决方案是使用CSS 3 transform属性。

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

诀窍是translateX(-50%)将#inner元素设置为其宽度左侧的50％。您可以使用相同的技巧进行垂直对齐。

这是显示水平和垂直对齐方式的小提琴。

有关更多信息，请参见Mozilla开发人员网络。

村村小小十三 2020.03.13

这是我的答案。

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

蛋蛋神乐 2020.03.13

对于Firefox和Chrome：

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

对于Internet Explorer，Firefox和Chrome：

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

text-align:对于现代浏览器，该属性是可选的，但对于Internet Explorer Quirks Mode，该属性对于旧版浏览器支持是必需的。

JinJinPro 2020.03.13

我通常的方法是使用绝对位置：

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

外层div不需要任何其他属性即可工作。

神乐蛋蛋 2020.03.13

如果不给定宽度，则不能居中，否则默认情况下它将占据整个水平空间。

Admin 2020.03.13

设置width和margin-left，将和设置margin-right为auto。不过，这仅适用于水平。如果您想同时使用两种方式，则只需同时进行。不要害怕尝试；不要害怕。并不是您会破坏任何东西。

飞云泡芙 2020.03.13

将未知高度和宽度的div居中

水平和垂直。它可以与相当现代的浏览器（Firefox，Safari / WebKit，Chrome，Internet Explorer 10，Opera等）一起使用。

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="content">This works with any content</div>

在Codepen或JSBin上进一步修补。

JinJinTom 2020.03.13

CSS3的box-align属性

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}

飞羽宝儿 2020.03.13

如果您不想设置固定宽度并且不想增加多余的边距，请添加display: inline-block到元素中。

您可以使用：

#element {
    display: table;
    margin: 0 auto;
}

阿飞神奇 2020.03.13

我创建了这个示例，以展示如何垂直和水平放置 align。

代码基本上是这样的：

#outer {
  position: relative;
}

和...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
}

center即使您调整屏幕大小，它也将保持不变。

Sam前端 2020.03.13

假设您的div很200px宽：

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

确保父元素的位置即相对，固定，绝对或粘性。

如果您不知道div的宽度，可以使用transform:translateX(-50%);而不是负边距。

https://jsfiddle.net/gjvfxxdj/

编辑：使用CSS calc，代码可以变得更加简单：

.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

原理仍然相同；将物品放在中间并补偿宽度。

猪猪西门 2020.03.13

一些张贴者提到CSS 3居中使用方式display:box。

此语法已过时，不应再使用。[另请参阅此帖子]。

因此，为了完整起见，这里是使用“ 灵活框式布局模块”在CSS 3中居中的最新方法。

因此，如果您有简单的标记，例如：

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

...并且您想将项目放在框中居中，这是您在父元素（.box）上需要的内容：

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

如果您需要支持使用旧版Flexbox语法的旧版浏览器，那么这是一个不错的地方。

米亚乐 2020.03.13

最好的方法是使用CSS 3。

箱型：

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

根据您的可用性，您也可以使用这些box-orient, box-flex, box-direction属性。

弹性：

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

阅读有关将子元素居中的更多信息

而这也解释了为什么盒模型是最好的办法：

为什么W3C机顶盒型号更好？

古一达蒙 2020.03.13

如果您不想在内部设置固定宽度，则div可以执行以下操作：

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

这样就使内部div成为可以以居中的内联元素text-align。

飞云Pro 2020.03.13

您可以将此CSS应用于内部<div>：

#inner {
  width: 50%;
  margin: 0 auto;
}

当然，您不必将设置width为50%。任何小于包含宽度的宽度<div>都可以使用。该margin: 0 auto是什么呢实际定心。

如果您以IE8 +为目标，最好改用以下方法：

#inner {
  display: table;
  margin: 0 auto;
}

它将使内部元素水平居中，并且无需设置特定的即可工作width。

这里的工作示例：

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android

文字对齐：居中

保证金：0自动

弹性盒

转变

<center> （已弃用）

仅水平居中

容器：

内容框：

演示：

水平和垂直居中

外容器：

内部容器：

内容框：

演示：

将未知高度和宽度的div居中

箱型：

阅读有关将子元素居中的更多信息

`<center>` （已弃用）