{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 该账号已被封号 的问题《How do I vertically center the text within a flex》','https://www.manongdao.com/q-811419.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Is there a special way to vertically center text in an element using flexboxes (or other pure CSS)?
Fiddle: http://jsfiddle.net/WK_of_Angmar/JZZWg/
<body>
<div id="main">
<section id="a">Test1</section>
<section id="b">Test2</section>
</div>
#a {
flex: 1 0 auto;
}
#b {
flex: 0 0 auto;
min-height: 3em;
background-color: yellow;
}
#a {
background-color: blue;
}
#main {
display: flex;
flex-direction: column;
height: inherit;
}
body {height: inherit;}
html {height: 100%;}
Using
line-heightis one solution, here's the link to Fiddle.Update: I took a little more interest in the flex model and found the centering properties, so I guess this makes a better solution for you (although not that neat and elegant because of all the prfixes). Here is the link to Fiddle using flex properties for alignment.
And here is a link that explains the usage of the properties.