3 ms·
Not easily. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Foo</title> <style> html
by hpaavola 13y ago
Not easily.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Foo</title>
<style>
html {height: 100%;}
body {height: 100%;}
.mid {display: inline-block; vertical-align: middle;}
/*body:before {content: ''; height: 100%; display: inline-block; vertical-align: middle;}*/
</style>
</head>
<body>
<div class="mid">vertically aligned</div>
</body>
</html>
would be easily, but you need to uncomment that last rule before it "works", and that is just ugly. And when that last rule is uncommented, viewport now has scrollbar for some reason that I did not have motivation to investigate.
Like chii said, that's because CSS is a language for styling, not for layouts.
- emn13 13y agoThe extra scrollbar is due to fact that you've set height to 100% but you still have padding on the body tag. Also, unrelatedly, you should remove the space between the body tag and the div tag to avoid font-specific horizontal offsets.