徽标和两个文本div在页面上垂直和水平居中[复制]

Question

这个问题在这里已有答案：

• How to horizontally center a <div>? 96回答
• How to vertically center a div for all browsers? 42回答
• How do I vertically center text with CSS? [duplicate] 38回答
• How to align a <div> to the middle (horizontally/width) of the page [duplicate] 27回答
• How to align 3 divs (left/center/right) inside another div? 18个答案

实现此布局的最佳方法和最佳实践是什么？这意味着它将在iPad，Android或桌面上保持一致。 CSS网格？ Flexbox的？徽标div应垂直和水平居中在页面上。文本div应位于徽标div的中间。

here is the layout mockup

Answer 1

没有正确的方法，你可以使用任何你喜欢的东西，但是我会建议flexbox为那个demande，但你可以用网格左右做..

.container{
  display: flex;
  justify-content: space-around; /* to meet your need or space-between*/
  align-items: center; /* vertical */
}

.container{ /* get all the space */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.container, .container > .item{
  display: flex;
  justify-content: space-around; /* horizontal, nice to try: center or space-between*/
  align-items: center; /* vertical */
}
    
.item {
  border: 2px solid blue;
  width: 150px;
  height: 100px;
}

.large{
  height: 200px;
}

@media screen and (max-width: 480px) { /* using media query to detect screen size */
  .container{
    flex-direction: column; /* switch display into column */
  }
}

<div class="container">
  <div class="item">Text Div Centered</div>
  <div class="item large">Logo Centered</div>
  <div class="item">Text Div Centered</div>
</div>

Answer 2

您可以使用Flexbox来实现这一目标。首先用.flex属性创建一个display:flex容器。现在将flex:1应用于其子女。它的所有孩子都有相同的宽度。

但是从显示的图像中，你的Logo Divs高度较大，然后在单个元素上应用相同的值。但是，如果你观察，没有任何东西集中。所以，为了使每个盒子居中，你需要在align-items:center上使用justify-content:center和.flex属性。

即使现在里面的文本没有居中，但是盒子是垂直和水平居中的。为了在孩子身上达到同样的目的，将display:flex和上述相同的定心方法应用于其孩子。现在孩子们的内容，即里面的文字也集中在一起。

.flex, .flex > div{
  display:flex;
  align-items:center;
  justify-content:center;
}
.flex > div{
  flex:1;
  height:80px;
  margin:5px;
  border:1px solid blue;
}
.flex .logoDiv{
  height:150px;
  width:100%;
}

<div class='flex'>
  <div class='textDiv'>Text Div Centered</div>
  <div class='logoDiv'>Logo Centered</div>
  <div class='textDiv'>Text Div Centered</div>
</div>

Answer 3

你能用桌子吗？并删除border / cellspacing ??

   td {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    }

<table>
<tr>
<td><div class="div1">test</div></td>
<td><div class="div2">test</div></td>
<td><div class="div3">test</div></td>
</tr>
<tr>
<td><div class="div1">test</div></td>
<td><div class="div2">test</div></td>
<td><div class="div3">test</div></td>
</tr>
</table>