html文本长度不一样的对齐,在CSS中使用不同文本大小的HTML正文元素居中对齐

我遇到了试图用CSS居中正文元素的问题。我希望它在页面上水平和垂直居中。问题在于，它现在是如何编写的，它会将文本置于短信的中间位置(即在三个字之下)，但是较长的信息会把它弄乱。在CSS中使用不同文本大小的HTML正文元素居中对齐

这里是我的CSS：(它是西纳特拉的ERB文件，但我不认为这会影响本CSS的解析)

body {

background: white;

/*TODO: still not perfect; changes based on length of message */

position: fixed;

top: 50%;

left: 50%;

margin-top: -100px;

margin-left: -100px;

}

.message {

color: #2f4f4f;

font-family: 'Roboto', sans-serif;

font-size: 36;

text-align: center;

}

.form {

text-align: center;

}

input[type=number]{

width: 100%;

border: none;

border-bottom: 6px solid #2f4f4f;

background: transparent;

text-align: center;

color: #2f4f4f;

font-size: 25px;

font-family: 'Roboto';

}

input[type=number]:focus {

outline: none;

}

#btn{

display: none;

}

2017-02-13

Minna

+0

你能添加这些问题发生的HTML？ –