7

它经常发生，我想在另一个垂直和水平方向居中一个 CSS 框。满足以下约束的最简单方法是什么？

  • 盒子应该精确居中，而不是近似居中。
  • 该技术应该适用于现代浏览器和 IE 版本回到 8
  • 该技术不应依赖于明确知道居中内容或包含框的宽度或高度。
  • 我通常知道容器比内容大，但支持更大的内容（然后对称溢出）会很好......
  • 容器的底层内容必须仍然能够响应点击和悬停，除非被居中内容遮挡

我目前使用 4 个（！）嵌套 div 来实现这一点，css 如下：

.centering-1 {
    position:absolute;
    top:0; left:0; right:0; bottom:0;
    text-align:center;
    visibility:hidden;
}
.centering-2 { 
    height:100%; 
    display:inline-table; 
}
.centering-3 { 
    display:table-cell; 
    vertical-align:middle; 
}
.centering-content { 
    visibility:visible; 
}

您可以将其视为 jsbin 片段。然而，这种方法虽然可行，但由于包装器 div 的数量很大，感觉有点矫枉过正，而且它不适用于比容器大的内容。如何在 CSS 中居中？

4

2 回答 2

2

您可以少用 2 个元素。任何比这更少的东西都需要 IE8（和 IE9）不支持的东西。

http://cssdeck.com/labs/0ltap96z

  <div class="centering-1">
    <div class="centering-2">
      <div class="intrinsically-sized-box">
        <p>You can put any content here too and the box will auto-size.</p>
      </div>
    </div>
  </div>

CSS：

body {max-width:750px;}
.generalblock {
  margin-top:2em; 
  position:relative;
  padding:10px;
  border:20px solid cyan;
  font-size: 18px;
}

.centering-1 {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  text-align:center;
  visibility:hidden;
  display: table;
  width: 100%;
}
.centering-2 {
  display:table-cell;
  vertical-align:middle;
}
.intrinsically-sized-box {
  visibility:visible;
  max-width:300px;
  margin: 0 auto;
  background: yellow; 
  position:relative;
  border:1px solid black;
}
于 2013-06-28T16:57:04.110 回答
2

水平居中很容易：

.inner {
  width: 70%; /* Anything less than 100% */
  margin-left: auto;
  margin-right: auto;
}

但是垂直居中有点棘手。现代浏览器的最佳技术是结合 inline-block 和伪元素。这源于“幽灵元素”，这是http://css-tricks.com/centering-in-the-unknown/上的最后一种技术。它设置添加一个伪元素并使用 inline-block 样式获得居中。CSS： 

.outer { 
  height: 10rem; 
  text-align: center; 
  outline: dotted black 1px; 
}

.outer:before { 
  content: ''; 
  display: inline-block; 
  height: 100%; 
  vertical-align: middle;
}

.inner { 
  width: 10rem; 
  display: inline-block; 
  vertical-align: middle;
  outline: solid black 1px; 
}

Codepen 的一个例子：http: //codepen.io/KatieK2/pen/ucwgi

对于更简单的情况，以下可能是不错的选择：

对于单行内容，您可以使用大于字体大小的 line-height 对元素内的文本进行快速而肮脏的垂直居中工作：

.inner { 
  border: 1px solid #666; 
  line-height: 200%;
}

支持最广泛的解决方案是使用非语义表。这适用于非常旧版本的 IE，并且不需要 JavaScript：

td.inner { 
  vertical-align: middle; 
}

这是已知高度元素的简单解决方案（可能在ems 中，而不是 s 中px）：

.outer { 
  position:relative; 
}
.inner { 
  position: absolute; 
  top:50%; 
  height:4em; 
  margin-top:-2em; 
  width: 50%; left: 25%; 
}
于 2013-06-28T17:15:08.087 回答