CSS：垂直居中元素答案

【问题标题】：CSS: Centering elements verticallyCSS：垂直居中元素
【发布时间】：2014-07-23 21:02:45
【问题描述】：

我正在尝试开发我的第一个响应式网站，但我遇到了一些麻烦（当然）。

我需要一个元素（类似于菜单）来包含 4 行元素，每个元素左侧有一个图像，右侧有一些文本。现在，我遇到的问题是我似乎无法使元素垂直居中正确。我已经尝试了几种似乎对很多人都有效的方法，所以我想我会问是否有人知道为什么似乎没有什么对我有用。这是图像 CSS 的样子：

.tablaBuscadorElementos > img {
position: relative;
width: 20px;
height:20px;
left:0;
right:0;
top:0;
bottom:0;
margin:0 auto;
float:left;}

这里是小提琴：http://jsfiddle.net/mampy3000/9JZdZ/1/

感谢任何帮助！

【问题讨论】：

你想让哪些元素垂直居中？

标签： css responsive-design

【解决方案1】：

由于您的元素是 inline-block ，您可以将 inline-block 伪元素 100% height 和 vertical-align:middle 注入到 img 和 span ：DEMO

基本上（+在您的 CSS 更新下方）：

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

.tablaBuscadorElementos {
    height:22%;/* instead min-height so value can be used for pseudo or direct child */ 
    border: 1px solid black;
    padding:0px;
    width:100%;
}
.tablaBuscadorElementos > span {
    font-size:20px;
    width:80%;
    vertical-align:middle; /* align to next inline-block element or baseline*/
    border:1px solid black;
    display:inline-block;/* layout*/
}
.tablaBuscadorElementos > img {
    vertical-align:middle; /* align to next inline-block element or baseline*/
    width: 20px;
    height:20px;

}

.tablaBuscador, .tablaBuscadorElementos{
    display:block;
}
.tablaBuscadorElementos:before {
    content:'';
    height:100%;/* calculated from 22% parent's height */
    display:inline-block;/* layout*/
    vertical-align:middle;/* align to next inline-block element or baseline*/
}

【讨论】：

伪元素可以是:after，before可以用来插入你的img/icon。
很好的答案。看了一点后，我认为这正是我想要的。
跟进问题，我在复制您所做的事情时遇到了一些问题。我不确定我得到你的方法。这是一个类似的小提琴：jsfiddle.net/mampy3000/zK4hS 我想在顶部的灰色 div 中复制垂直对齐（带有按钮和一些文本的那个）。你能帮我理解我在那里做错了什么吗？非常感谢！

【解决方案2】：

您可以通过将此 css 添加到 .tablaBuscador 来做到这一点

position: fixed;
top: 50%;
margin-top:-100px;  /* half of height */

较新的选项是使用 calc() 但您可能会遇到浏览器支持问题。

position: fixed;
top:calc(50% - 100px).

以下是支持 calc() 的浏览器：http://caniuse.com/#feat=calc

【讨论】：

【解决方案3】：

您的代码需要进行重大调整。您是浮动元素，对它们使用垂直对齐，将它们相对定位，并将左、右、上和下设置为 0。这些都没有任何意义。这是一个清理过的小提琴：http://jsfiddle.net/jL2Gz/。

这是一个调整后的代码：

* {
    padding: 0;
    margin: 0;
}

body {
    height:100%;
}

.tablaBuscador {
    font-family: "Maven Pro", sans-serif;
    height:200px;
    width:40%;
}

.tablaBuscador > div {
    border: 1px solid black;
    padding: 10px 0;
}

.tablaBuscador > div > span {
    font-size:20px;
    width:80%;
    border:1px solid black;
}

.tablaBuscador > div > img {
    width: 20px;
    height: 20px;
}

.tablaBuscador > div > * {
    display: inline-block;
    vertical-align: middle;
}

【讨论】：