Question

我有一个容器，我将在其中动态获取内容。我希望所有即将到来的内容/ div自动居中。我不想使用保证金属性。

<div class="linContainer">

   <div class="content1"></div>
   <div class="content2"></div>

</div>

Answer 1

要垂直和水平居中，您可以将默认display从block更改为table-cell。

Fiddle

Answer 2

你可以这样做：

.linContainer {
    text-align: center;
}

请注意，所有内容都将居中（包括文字）。或者你想只以div为中心？

Answer 3

试试这段代码

.lincontainer {
display: flex;
justify-content: center;
}

Answer 4

不确定text-align:center是否符合此目的。

 .linContainer{
  width:150px;
  height:auto;
  text-align:center;
  border:1px solid red;
  max-height:200px;
}

您可以查看jsfiddle

Answer 5

.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>

Answer 6

您可以使用以下position: absolute成语：

＆＃13;

.linContainer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

[class^='content'] {
  height: 50px;
  width: 50px;
  background: cyan;
  border: 1px solid black;
}

＆＃13;

<div class="linContainer">

   <div class="content1"></div>
   <div class="content2"></div>

</div>

＆＃13;

或者您可以使用flexbox - display: flex：

＆＃13;

.linContainer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

[class^='content'] {
  height: 50px;
  width: 50px;
  background: cyan;
  border: 1px solid black;
}

＆＃13;

<div class="linContainer">

   <div class="content1"></div>
   <div class="content2"></div>

</div>

＆＃13;

关于以CSS为中心的良好参考：

Answer 7

实现这一目标的最佳方法是使用css flex。

注意：仅使用边距来定义内容块之间的空间，而不是将其居中。

.flex-container {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	flex-flow: row wrap;
	align-content: flex-end;
}

  .linContainer{
   background:#aeaeae;
   }

.content1, .content2, .content3, .content4{
  background:lawngreen;
  padding:20px;
  margin:10px;
  
  }

<div class="linContainer flex-container">

   <div class="content1"></div>
   <div class="content2"></div>
   <div class="content3"></div>
   <div class="content4"></div>

</div>

Answer 8

<div class="align">
     Test
</div>


div.align {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 200px;
    height: 200px;
    background-color:#ff6a00;
}

如何在不使用margin属性的情况下将内容置于div中

8 个答案: