Spectre: Is this the most spectre-ish way to center vertically?

Created on 2 Sep 2018 · 3Comments · Source: picturepan2/spectre

Trying to figure out if there's a better way to center something on the page. Here's what I have so far; am I missing anything obvious that Spectre.css has built in?

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center test 1 | Spectre.css</title>
    <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
    <style>
        .vcenter { 
            text-align: center;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
        }
    </style>    
</head>
<body>
    <div class="container">
        <div class="columns">
            <div class="column vcenter">
                <h1>CENTERED</h1>
            </div>
        </div>
    </div>
</body>

(Gist at https://gist.github.com/tomcam/4dd6dfb90abdc504daccd9a8003329a3)

question

Source

tomcam

Most helpful comment

@laurentpayot I am adding it and some examples too.

picturepan2 on 11 Nov 2018

❤1 👍1

All 3 comments

@tomcam You can use flex-centered class in the parent elements, then the child elements inside it will be centered vertically and horizontally.

picturepan2 on 6 Nov 2018

👍2

@picturepan2 I was using the same as flex-centered, because I did not know it existed. There is nothing about it in the position utilities documentation: do you want me to make a PR?