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

Question

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

<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

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

不确定text-align:center是否能达到目的。

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

您可以检查这个jsfiddle

Answer 6

您可以使用以下position: absolute习惯用法：

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

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

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

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

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

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

• W3C-CSS：以事物为中心
• CSS技巧-以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;
}