Centered legend

dabblet.css

/* Centered legend */
.fieldset {
    margin: 4em;
    border: 2px groove #AAA;
}

.legend {
    width: 100%;
    padding: 0;
    margin: 0;
}

.legend__inner {
    display: block;
    overflow: hidden;

    text-align: center;
    white-space: nowrap;
}

.legend__content {
    display: inline-block;
    vertical-align: middle;
    white-space: normal;
    line-height: 1.4;
}

.legend__left,
.legend__right {
    display: inline-block;
    
    vertical-align: middle;
    
    border-top: 2px groove #AAA;
    width: 999px;
    margin: 0 0 0 -999px;
}

.legend__right {
    margin: 0 -999px 0 0;
}


/* Showing that gaps are transparent */
/* Pattern got from http://lea.verou.me/css3patterns/#diagonal-checkerboard */
BODY {
    background-color: #EEE;
    background-image: -webkit-linear-gradient( 45deg, #DDD 25%,transparent 25%, transparent 75%, #DDD 75%, #DDD), 
                      -webkit-linear-gradient(-45deg, #DDD 25%,transparent 25%, transparent 75%, #DDD 75%, #DDD);
    background-image:    -moz-linear-gradient( 45deg, #DDD 25%,transparent 25%, transparent 75%, #DDD 75%, #DDD), 
                         -moz-linear-gradient(-45deg, #DDD 25%,transparent 25%, transparent 75%, #DDD 75%, #DDD);
    background-image:      -o-linear-gradient( 45deg, #DDD 25%,transparent 25%, transparent 75%, #DDD 75%, #DDD), 
                           -o-linear-gradient(-45deg, #DDD 25%,transparent 25%, transparent 75%, #DDD 75%, #DDD);
    background-image:         linear-gradient( 45deg, #DDD 25%,transparent 25%, transparent 75%, #DDD 75%, #DDD), 
                              linear-gradient(-45deg, #DDD 25%,transparent 25%, transparent 75%, #DDD 75%, #DDD);
    background-size:60px 60px;
    }
.content {
    padding: 1em 0;
}

dabblet.html

<fieldset class="fieldset">
    <legend class="legend">
        <span class="legend__inner">
            <span class="legend__left"></span>
            <span class="legend__content">Wait for it…</span>
            <span class="legend__right"></span>
        </span>
    </legend>
    lalala
</fieldset>


<fieldset class="fieldset">
    <legend class="legend">
        <span class="legend__inner">
            <span class="legend__left"></span>
            <span class="legend__content">Multiline<br/>legend</span>
            <span class="legend__right"></span>
        </span>
    </legend>
    lalala
</fieldset>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"html"}