Question

我需要一个适合屏幕中央的按钮，文本与按钮垂直对齐。这只能使用CSS，并且只能使用用户百分比。这是我到目前为止的尝试：

HTML

<div id="outer">
    <div id="button">
        button text
    </div>
</div>

CSS

body {
    margin : 0px;
}
#outer {
    position : absolute;
    width : 100%;
    height : 100%;
    background-color : #123456;
    text-align: center;
}
#outer:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#button {
    height : 50%;
    width : 50%;
    background-color : #FFFFFF;
    display: inline-block;
    vertical-align: middle;
}

Answer 1

如果您可以使用flexbox，那么可行且干净的解决方案如下：

将以下内容添加到#outer容器中，以对齐按钮div：

#outer {
  ...
  display: flex;
  align-items: center;
  justify-content: center;
}

然后转到#button以对齐内部文字：

#button {
    ...
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

您还必须移除display: inline-block;内的#button。

工作小提琴（在FF和Chrome MacOS上测试）：http://jsfiddle.net/8BJ94/53/

有关Flexbox支持的完整参考，请点击此处：http://caniuse.com/flexbox

Answer 2

现在你应该使用显示并保持流量，绝对定位是从另一个时间：）

所以display:table

html, body {
    height:100%;
    width:100%;
    margin:0;
}
html {
    display:table;
}
body {
    display:table-cell;
    vertical-align:middle;
    background:#48a
}
#button {
    height : 50%;
    width : 50%;
    background-color : #FFFFFF;
    margin:auto;
    text-align:center;
}
/* correction of your use of pseudo element to vertical center */
#button:before {
    content:'';
    height:100%;
    ;
    vertical-align:middle;
    display:inline-block;
}

很快：display:flex

html, body {
    height:100%;
    width:100%;
    margin:0;
}
body {
    display:flex;
    background:#48a
}
#button {
    height : 50%;
    width : 50%;
    background-color : #FFFFFF;
    margin:auto;
    text-align:center;
}
/* correction of your use of pseudo element to vertical center */
#button:before {
    content:'';
    height:100%;
    ;
    vertical-align:middle;
    display:inline-block;
}

应用flex display to button box too：添加这些规则并删除伪元素：

#button {
    height : 50%;
    width : 50%;
    background-color : #FFFFFF;
    /* to center itself in flex box */
    margin:auto;
    /* to center inside content */
    justify-content:center;
    display:flex;
    align-items: center;
}

display:flex;适用于最新版本：Opera，Chrome，Firefox等。

display;table;适用于大多数浏览器，因为IE8

Answer 3

您也可以使用display table-cell而不使用伪选择器，如下所示

<div class="wrapper">
    <div class="block">
        <div id="button">button text</div>
    </div>
</div>
html, body {
    height:100%;
}
.wrapper {
    display:table;
    height:100%;
    text-align:center;
    border:1px solid green;
    width:100%;
}
.block {
    display:table-cell;
    vertical-align:middle;
    border:1px solid red;
}
#button {
    background-color : #f00;
    display: inline-block;
    vertical-align: middle;
    padding:50px;
}

http://jsfiddle.net/8BJ94/57/

尝试将文本放在垂直居中的百分比div中

3 个答案: