居中放置div块而没有宽度

HTML CSS

Tony凯

2020-03-24

当我尝试使div块“ products”居中时出现问题，因为我事先不知道div宽度。有人有解决办法吗？

更新：我的问题是我不知道要显示多少个产品，我可以拥有1个，2个或3个产品，如果它是一个固定的数字，我可以将它们居中，因​​为我知道父级的宽度div，当内容动态时，我只是不知道该怎么做。

.product_container {
  text-align: center;
  height: 150px;
}

.products {
  height: 140px;
  text-align: center;
  margin: 0 auto;
  clear: ccc both; 
}
.price {
  margin: 6px 2px;
  width: 137px;
  color: #666;
  font-size: 14pt;
  font-style: normal;
  border: 1px solid #CCC;
  background-color:	#EFEFEF;
}
<div class="product_container">
  <div class="products" id="products">
    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>

    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>   

    <div id="product_15">
      <img src="/images/ecommerce/card_default.png">
      <div class="price">R$ 0,01</div>
    </div>
  </div>
</div>

第3674篇《居中放置div块而没有宽度》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共18个回答
猴子 2020.03.24

将此CSS添加到您的product_container类

    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 700px;
米亚Tony 2020.03.24

我的解决方案是：

.parent {
    display: flex;
    flex-wrap: wrap;
}

.product {
    width: 240px;
    margin-left: auto;
    height: 127px;
    margin-right: auto;
}
Mandy猴子 2020.03.24

这是在不知道元素内部宽度的div中居中放置任何内容的一种方法。

#product_15{
    position: relative;
    margin: 0 auto;
    display: table;
}
.price, img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
神乐猿 2020.03.24 
<style type="text/css">
.container_box{
    text-align:center
}
.content{
    padding:10px;
    background:#ff0000;
    color:#ffffff;

}

使用范围而不是内部div

<div class="container_box">
   <span class="content">Hello</span>
</div>
猿路易 2020.03.24

糟糕的修复程序，但确实有效...

CSS：

#mainContent {
    position:absolute;
    width:600px;
    background:#FFFF99;
}

#sidebar {
    float:left;
    margin-left:610px;
    max-width:300;
    background:#FFCCCC;
}
#sidebar{


    text-align:center;
}

HTML：

<center>
<table border="0" cellspacing="0">
  <tr>
    <td>
<div id="mainContent">
1<br/>
<br/>
123<br/>
123<br/>
123<br/>
</div><div id="sidebar"><br/>
</div></td>
</tr>
</table>
</center>
小胖村村 2020.03.24

恐怕没有明确指定宽度的唯一方法就是使用（gasp）表。

前端小哥 2020.03.24

适用于旧浏览器的简单修复程序（但确实使用表格，并且需要设置高度）：

<div style="width:100%;height:40px;position:absolute;top:50%;margin-top:-20px;">
  <table style="width:100%"><tr><td align="center">
    In the middle
  </td></tr></table>
</div>
古一 2020.03.24

这样做display:table;，并设置margin到auto

重要的代码位：

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}

无论您现在获得多少元素，它都会自动居中对齐

代码段中的示例：

.relatedProducts {
    display: table;
    margin-left: auto;
    margin-right: auto;
}
a {
  text-decoration:none;
}
<div class="row relatedProducts">
<div class="homeContentTitle" style="margin: 100px auto 35px; width: 250px">Similar Products</div>
					
<a href="#">test1 </a>
<a href="#">test2 </a>
<a href="#">test3 </a>
</div>

神乐Harry 2020.03.24

我找到了有趣的解决方案，我制作了滑块，不得不将滑块控件居中，并且做到了这一点，并且效果很好。您还可以向父级添加相对位置，并垂直移动子级位置。看看http://jsfiddle.net/bergb/6DvJz/

CSS：

#parent{
        width:600px;
        height:400px;
        background:#ffcc00;
        text-align:center;
    }

#child{
        display:inline-block;
        margin:0 auto;
        background:#fff;
    }

HTML：

<div id="parent">
    <div id="child">voila</div>
</div>
梅卡卡西Eva 2020.03.24

迈克·林的答案略有不同

如果添加overflow: auto;（或hidden）div.product_container，则不需要div.clear。

这源自本文-> http://www.quirksmode.org/css/clearing.html

这是修改后的HTML：

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
</div>

这是修改后的CSS：

.product_container {
  overflow: auto;
  /* width property only required if you want to support IE6 */
  width: 100%;
}

.outer-center {
  float: right;
  right: 50%;
  position: relative;
}

.inner-center {
  float: right;
  right: -50%;
  position: relative;
}

原因之所以如此div.clear（而不是让元素为空）会更好（原因是Firefox过于热情）。

例如，如果您拥有以下html：

<div class="product_container">
    <div class="outer-center">
        <div class="product inner-center">
        </div>
    </div>
    <div style="clear: both;"></div>
</div>
<p style="margin-top: 11px;">Some text</p>

然后，在Firefox（撰写本文时为8.0）中，您会在之前看到11px空白。更糟糕的是，即使内容恰好适合屏幕尺寸，您也会获得整个页面的垂直滚动条。 product_container

小哥西门 2020.03.24 
<div class="product_container">
<div class="outer-center">
<div class="product inner-center">
    </div>
</div>
<div class="clear"></div>
</div>

.outer-center
{
float: right;
right: 50%;
position: relative;
}
.inner-center 
{
float: right;
right: -50%;
position: relative;
}
.clear 
{
clear: both;
}

.product_container
{
overflow:hidden;
}

如果您不为“ .product_container”提供“ overflow：hidden”，则“ outer-center” div将与其附近的其他附近内容重叠。“外部中心”右侧的任何链接或按钮将不起作用。尝试使用“外部中心”的背景色来了解“溢出：隐藏”的需要

斯丁 2020.03.24

试试这个新的CSS和标记

这是修改后的HTML：

<div class="product_container">
<div class="products" id="products">
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>   
   <div id="product_15" class="products_box">
       <img src="/images/ecommerce/card_default.png">
       <div class="price">R$ 0,01</div>
   </div>
</div>

这是修改后的CSS：

<pre>
.product_container 
 {
 text-align:    center;
 height:        150px;
 }

.products {
    left: 50%;
height:35px;
float:left;
position: relative;
margin: 0 auto;
width:auto;
}
.products .products_box
{
width:auto;
height:auto;
float:left;
  right: 50%;
  position: relative;
}
.price {
    margin:        6px 2px;
    width:         137px;
    color:         #666;
    font-size:     14pt;
    font-style:    normal;
    border:        1px solid #CCC;
    background-color:   #EFEFEF;
}

小胖Gil 2020.03.24

使用css3 flexbox与justify-content：center;

    <div class="row">
         <div class="col" style="background:red;">content1</div>
          <div class="col" style="">content2</div>
    </div>


.row {
    display: flex; /* equal height of the children */
    height:100px;
    border:1px solid red;
    width: 400px;
    justify-content:center;
}
JimJinJin 2020.03.24

这将使元素（例如“有序列表”或“无序列表”）或任何元素居中。只需将其包装在具有externalElement类的Div内，并将内部元素赋予innerElement类即可。

externale类用于IE，旧的Mozilla和大多数新的浏览器。 

 .outerElement {
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
        zoom: 1;
        position: relative;
        left: 50%;
    }

.innerElement {
    position: relative;
    left: -50%;
}
卡卡西Near 2020.03.24

默认情况下，div元素显示为块元素，因此它们具有100％的宽度，使它们居中无意义。如Arief所建议，您必须指定a width，然后可以auto在指定时使用margin以使a为中心div。

另外，您也可以强制display: inline，但是随后您会得到一些类似a span而不是a的行为div，因此这没有任何意义。

乐古一 2020.03.24

我找到了一个更优雅的解决方案，将“内联代码块”组合在一起以避免使用float和hacky clear：两者。它仍然需要嵌套的divs tho，这不是很语义，但它确实可以工作...

div.outer{
    display:inline-block;
    position:relative;
    left:50%;
}

div.inner{
    position:relative;
    left:-50%;
}

希望能帮助到你！

达蒙小胖 2020.03.24

大多数浏览器都支持display: table;CSS规则。这是一个在容器中居中放置div的好技巧，而无需添加额外的HTML或对容器应用约束样式（例如text-align: center;将容器中所有其他内联内容居中放置），同时保持所包含的div的动态宽度：

HTML：

<div class="container">
  <div class="centered">This content is centered</div>
</div>

CSS：

.centered { display: table; margin: 0 auto; }


.container {
  background-color: green;
}
.centered {
  display: table;
  margin: 0 auto;
  background-color: red;
}
<div class="container">
  <div class="centered">This content is centered</div>
</div>

更新（2015-03-09）：

今天执行此操作的正确方法实际上是使用flexbox规则。浏览器支持受到更多限制（CSS表支持与flexbox支持），但是此方法还允许许多其他事情，并且是针对这种行为的专用CSS规则：

HTML：

<div class="container">
  <div class="centered">This content is centered</div>
</div>

CSS：

.container {
  display: flex;
  flex-direction: column; /* put this if you want to stack elements vertically */
}
.centered { margin: 0 auto; }


.container {
  display: flex;
  flex-direction: column; /* put this if you want to stack elements vertically */
  background-color: green;
}
.centered {
  margin: 0 auto;
  background-color: red;
}
<div class="container">
  <div class="centered">This content is centered</div>
</div>

村村伽罗 2020.03.24 
<div class="outer">
   <div class="target">
      <div class="filler">
      </div>
   </div>
</div>

.outer{
   width:100%;
   height: 100px;
}

.target{
   position: absolute;
   width: auto;
   height: 100px;
   left: 50%;
   transform: translateX(-50%);
}

.filler{
   position:relative;
   width:150px;
   height:20px;
}

如果绝对定位了目标元素，则可以通过在一个方向（left: 50%）上将其移动50％，然后在相反方向（transform:translateX(-50%)）上将其转换50％来使其居中。这种方法无需定义目标元素的宽度（或使用width:auto）。父元素的位置可以是静态，绝对，相对或固定的。

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

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