1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

    #content {
        width: 800px;
        background-color: lightgrey;
        margin-left: auto;
        margin-right: auto;
        padding: 12px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

<table class="highlighttable"><tr><td class="linenos"><div class="linenodiv"><pre><a href="#L-1"> 1</a> <a href="#L-2"> 2</a> <a href="#L-3"> 3</a> <a href="#L-4"> 4</a> <a href="#L-5"> 5</a> <a href="#L-6"> 6</a> <a href="#L-7"> 7</a> <a href="#L-8"> 8</a> <a href="#L-9"> 9</a> <a href="#L-10">10</a> <a href="#L-11">11</a> <a href="#L-12">12</a></pre></div></td><td class="code"><div class="highlight"><pre><span></span><span id="L-1"><a name="L-1"></a> #content { </span><span id="L-2"><a name="L-2"></a> width: 800px; </span><span id="L-3"><a name="L-3"></a> background-color: lightgrey; </span><span id="L-4"><a name="L-4"></a> margin-left: auto; </span><span id="L-5"><a name="L-5"></a> margin-right: auto; </span><span id="L-6"><a name="L-6"></a> padding: 12px; </span><span id="L-7"><a name="L-7"></a> display: flex; </span><span id="L-8"><a name="L-8"></a> flex-direction: row; </span><span id="L-9"><a name="L-9"></a> flex-wrap: wrap; </span><span id="L-10"><a name="L-10"></a> justify-content: center; </span><span id="L-11"><a name="L-11"></a> align-items: center; </span><span id="L-12"><a name="L-12"></a> } </span></pre></div> </td></tr></table>