如何做CSS垂直+水平居中 [英] How to do Vertical+Horizontal centering in CSS

问题描述

它经常发生，我想要一个css框中心在另一个垂直和水平。

It regularly occurs that I want to center a css box inside another one both vertically and horizontally. What's the simplest way to do so that satisfies the following constraints?

• 这个框应该精确地居中，而不是大约。


• 该技术应该在现代浏览器中工作，并在IE版本中回到8


• 该技术应该不依赖于明确知道宽度或高度


• 我通常知道容器大于内容，但支持更大的内容（然后对称地溢出）将是很好的...
li>

• 容器的基本内容必须仍然能够响应点击和悬停（除了被居中内容遮盖的位置）

• The box should be precisely centered, not approximately.
• The technique should work in modern browsers and in IE versions back to 8
• The technique should not depend on explicitly knowing the width or height of either the centered content or the containing box.
• I generally know the container is larger than the content, but supporting larger content (which then overflows symmetrically) would be nice...
• The underlying content of the container must still be able to respond to clicks and hovers except where obscured by the centered content

我目前使用4（！）嵌套的div来实现这一点，css沿着以下行：

I currently use 4 (!) nested divs to achieve this, with css along the following lines:

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

您可以查看 this in a action as a jsbin snippet 。
然而，这种方法虽然可行，但由于大量的封装器div，感觉像极端的过度使用，并且它不适用于大于容器的内容。

You can see this in action as a jsbin snippet. However, this approach, while workable, feels like extreme overkill due to the large number of wrapper divs, and it doesn't work with content that's larger than the container. How can I center things in CSS?

推荐答案

水平居中很容易：

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

但是垂直居中有点棘手。现代浏览器的最佳技术是结合inline-block和伪元素。这源于Ghost元素，这是 http：// css-tricks中的最后一种技术。 com /未知中心/ 。它设置添加一个伪元素，并使用内联块风格获得中心。
CSS：

But vertical centering is a little tricky. The best technique for modern browsers is to combine inline-block and a pseudo elements. This originates from "Ghost element", the last technique at http://css-tricks.com/centering-in-the-unknown/. It sets adds a pseudo-element and uses inline-block styles get the centering. The 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

An example on Codepen: http://codepen.io/KatieK2/pen/ucwgi

对于更简单的情况，以下可能是很好的选项：

For simpler cases, the following may be good options:

对于单行内容，您可以执行快速和脏的垂直居中作业元素中的文本使用大于您的font-size的行高：

For single lines of content, you can do a quick and dirty vertical centering job on the text within an element by using line-height larger than your font-size:

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

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

The solution with widest support is to use a non-semantic table. This works with very old versions of IE and doesn't require JavaScript:

td.inner { 
  vertical-align: middle; 
}

这里是已知高度元素的简单解决方案c $ c> em s，而不是 px ）：

And here is simple solution for known height elements (which could be in ems, not px):

.outer { 
  position:relative; 
}
.inner { 
  position: absolute; 
  top:50%; 
  height:4em; 
  margin-top:-2em; 
  width: 50%; left: 25%; 
}

这篇关于如何做CSS垂直+水平居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！