Html 如何使图元水平居中

如何使用CSS将一个

水平居中放置在另一个

中

福福

您可以将此CSS应用于内部

：

#内部{
宽度：50%；
保证金：0自动；
}

当然，您不必将

宽度设置为
50%
。任何小于包含的
的宽度都可以使用。
margin:0 auto
是实际对中的作用

如果您的目标是（以及以后的目标），那么最好使用以下选项：

#内部{
显示：表格；
保证金：0自动；
}

它将使内部元素水平居中，并且无需设置特定的
宽度

此处的工作示例：


#内部{
显示：表格；
保证金：0自动；
边框：1px纯黑；
}
#外{
边框：1px纯红；
宽度：100%
}

福福
如果不给它一个宽度，它就不能居中。否则，默认情况下，它将占用整个水平空间。
设置
宽度
，并将
左边距
和
右边距
设置为
自动
。不过，这只适用于水平方向。如果你想两种方式都做，你就要两种方式都做。不要害怕实验；你不会弄坏任何东西。
如果你不想在内部
div
上设置一个固定的宽度，你可以这样做：


#外部{
宽度：100%；
文本对齐：居中；
}
#内在的{
显示：内联块；
}

福福
我最近不得不将一个“隐藏”div（即，
display:none；
）居中，该div中有一个表格表单，需要在页面上居中。我编写了以下jQuery代码来显示隐藏的div，然后将CSS内容更新为自动生成的表格宽度，并将边距更改为表格中心。（显示切换通过单击链接触发，但不需要显示此代码。）

注意：我正在分享这段代码，因为谷歌把我带到了这个堆栈溢出解决方案中，除了隐藏的元素没有任何宽度，并且在显示之前无法调整大小/居中之外，其他一切都会起作用


$（函数（）{
$（“#内部”）.show（）.width（$（“#内部表格”）.width（））.css（'margin'，'0 auto'）；
});

姓名：
电邮：
电邮：
假设您的div是200像素宽：

.centered{
位置：绝对位置；
左：50%；
左边距：-100px；
}

确保父元素是相对的、固定的、绝对的或粘性的

如果不知道div的宽度，可以使用
transform:translateX（-50%）而不是负边距


使用，代码可以变得更简单：




原则仍然是一样的；将项目放在中间并补偿宽度。
 < P> 

#外部{
宽度：100%；
身高：100%；
显示：框；
盒子方向：水平；
盒式包装：中间；
框对齐：居中；
}
如果您不想设置固定的宽度，也不想增加额外的边距，请将
显示：内联块
添加到元素中

您可以使用：

#元素{
显示：表格；
保证金：0自动；
}
对于Firefox和Chrome：



正文
最好的方法是使用

盒子型号：

#外部{
宽度：100%；
/*火狐*/
显示器：-moz盒；
-莫兹盒包装：中心；
-moz框对齐：居中；
/*狩猎与铬*/
显示：-网络工具包盒；
-webkit盒包：中心；
-webkit框对齐：居中；
/*W3C*/
显示：框；
盒式包装：中间；
框对齐：居中；
}
#内在的{
宽度：50%；
}

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

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

外部div不需要任何额外的属性就可以工作。
一些海报提到了使用
display:box的CSS3居中方式

此语法已过时，不应再使用。[另见

为了完整起见，这里是使用在CSS3中集中的最新方法

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

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


.box{
显示器：flex；
柔性包装：包装；
/*可选。仅当您希望包装项目时*/
证明内容：中心；
/*用于水平对齐*/
对齐项目：居中；
/*用于垂直对齐*/
}
* {
保证金：0；
填充：0；
}
html，
身体{
身高：100%；
}
.盒子{
高度：200px；
显示器：flex；
柔性包装：包装；
证明内容：中心；
对齐项目：居中；
边框：2个实心番茄；
}
.包厢部{
利润率：0.10px；
宽度：100px；
}
.项目1{
高度：50px；
背景：粉红色；
}
.项目2{
背景：棕色；
高度：100px；
}
.项目3{
高度：150像素；
背景：橙色；
}

A.
B
C
我最近发现了一种方法：

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

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

两个元件必须具有相同的宽度才能正常工作。
使用：


#outerDiv{
宽度：500px；
}
#innerDiv{
宽度：200px；
保证金：0自动；
}

内在内容
我创建它是为了演示如何垂直对齐和水平对齐

代码基本上是这样的：

#outer {
  position: relative;
}

而且

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

即使您调整屏幕大小，它也会停留在
中心
。
您可以这样做

#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;
}

#容器{
显示：表格；
宽度：；
身高：；
}
#内在的{
宽度：；
显示：表格单元格；
保证金：0自动；
文本对齐：居中；
垂直对齐：中间对齐；
}

这也将垂直对齐
#内部
。如果您不想，请删除
显示
和
垂直对齐
属性；
Chris Coyier，他在他的博客上写了一篇关于“以未知为中心”的文章。这是多个解决方案的综合。我发布了一个在这个问题中没有发布的解决方案。它有更多的浏览器支持比溶质
#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;
}

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

margin: auto 0;

text-align: center;

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

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

#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 % );
}

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

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