使用CSS的垂直中心 [英] Vertical center with CSS

问题描述

我知道有很多方法可以使用CSS集中内容。水平放置任何东西都很直接。然而，如果你要垂直地居中，这是一个全新的故事。
我只是想知道为什么我们不能说bottom-align：auto; top-align：auto;当我们想要水平中心时，我们做什么？
为什么看起来像一个简单的东西看起来那么难，当水平对中的东西是那么简单？我知道有很多方法，但让我们只是说你有一个未知大小的元素，你想要集中在另一个未知大小的元素。

我已经坐在这里几乎两天，没有在这个答案上找到一个好问题，我们有许多不同的方法来水平放置项目，但为什么没有一个单个CSS标准提出了一种方法来垂直居中？这是坏事吗？它使人们哭泣还是随意地劳动？它熔化核反应堆吗？

我们住在2014年。似乎没有必要使用Javascript为了做一些简单的东西，在另一个元素中心。

编辑：
我的意思代码示例：
http://jsfiddle.net/VsakD/

CSS：

  div.parentbox 
 {
 width：500px; 
 height：500px; 
 border-style：solid; 
} 
 
 div.childbox 
 {
 width：300px; 
 height：300px; 
 border-style：solid; 
 margin-left：auto; 
 margin-right：auto; 
 margin-top：auto; 
 margin-bottom：auto; 
} 
  

HTML：

 < div class =parentbox> 
< div class =childbox> 
我将在parentbox的中间，不管它的大小！ 
< / div> 
< / div> 
  

解决方案

正是为什么我不能只说 margin-top：auto; margin-bottom：auto; 到垂直对齐，这将是合理的假设将工作，因为你 margin-left：auto;




根据 规格 （ 10.6.2 ）：

在内部替换元素，在正常的
流中的块级替换元素，'inline-block'正常流和浮动中的元素
替换元素

如果margin-top或margin-bottom '，其使用值为 0 。

c $ c> margin 是这种情况，不会改变。

顺便说一下，为了对齐一个div元素 ），您可以按照此方法：

  .parentbox {
 text-align：center; / *水平对齐内联元素* / 
 font：0/0 a; / *<  - 删除inline（-block）元素之间的差距* / 
} 
 
 .parentbox：before {
 content：''; 
 display：inline-block; 
 vertical-align：middle; 
 height：100％; 
} 
 
 .childbox {
 display：inline-block; 
 vertical-align：middle; 
 font：1rem / 1 Arial，sans-serif; / *<  - 重置字体* / 
} 
  

工作演示

I know there are many ways to center things with CSS. Centering anything horizontally is quite straight forward. However, if you are going to center anything vertically, it is a whole new story. I just want to know why we can't just say bottom-align:auto; top-align:auto; as we do when we want something centered horizontally? Why does something which seems as simple as centering something seem so hard when centering something horizontally is that simple? I know there are many ways, but let's just say you have an element of an unknown size you want to center inside another element of unknown size.

I have been sitting with this for almost two days without finding a good question on this answer, we have tons of different ways to center items horizontally, but why has not one single CSS standard come up with a way to center this vertically? Is it a bad thing to do? Does it make people cry or randomly go into labor? Does it melt down nuclear reactors?

We live in 2014. It seems unnecessary to have to use Javascript in order to do something as simple as to center something inside another element.

Edit: Code sample of what I mean: http://jsfiddle.net/VsakD/

CSS:

div.parentbox
{
    width:500px;
    height:500px;
    border-style:solid;
}

div.childbox
{
    width:300px;
    height:300px;   
    border-style:solid;
    margin-left:auto;
    margin-right:auto;
    margin-top:auto;
    margin-bottom:auto;
}

HTML:

<div class="parentbox">
    <div class="childbox">
        I shall be in the middle of parentbox regardless of its size!
    </div>
</div>

解决方案

Can someone please highlight exactly why I can't just say margin-top:auto; margin-bottom:auto; to vertical align, which would be logical to assume would work since you do margin-left:auto; margin:right:auto; to horizontally align?

According to Spec (10.6.2):

Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements

If 'margin-top', or 'margin-bottom' are 'auto', their used value is 0.

That's why using top/bottom margin is this case, doesn't make a change.

By the way, in order to align a div element (with unknown dimensions) vertically inside a container, you could follow this approach:

.parentbox {        
    text-align: center; /* Align inline elements center horizontally */
    font: 0/0 a; /* <-- remove the gap between inline(-block) elements */
}

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

.childbox {
    display: inline-block;
    vertical-align: middle;
    font: 1rem/1 Arial, sans-serif;  /* <-- Reset the font */
}

WORKING DEMO

这篇关于使用CSS的垂直中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！