如何在中间对齐 DocumentFragment？

Question

I have created a set of buttons 9x9 but they are in the left upper corner and I would like to align them all in the center. I have tried using <div> to align it all, but it doesn't work and nothing appears on the page.

    var docFrag = document.createDocumentFragment();
    for (var i=0; i < 9 ; i++){ 
        var row = document.createElement("tr") 
        for (var j=0; j < 9 ; j++){ 
                var elem = document.createElement('input');
                elem.className = 'gumb';
                elem.type = 'button';
                ...something...
                docFrag.appendChild(elem); 
            } 
        document.body.appendChild(docFrag); 
        document.body.appendChild(row); 
    } 

Answer 1

Use this js instead:

// use div to add class to center the elements
var item = document.createElement('div');
item.className = "container";

    for (var i=0; i < 9 ; i++){
        var docFrag = document.createDocumentFragment();
        var row = document.createElement("br") 
        for (var j=0; j < 9 ; j++){ 
                var elem = document.createElement('input');
                elem.className = 'gumb';
                elem.type = 'button';
                docFrag.appendChild(elem); 
            } 
        item.appendChild(docFrag); 
        item.appendChild(row); 
    } 
document.body.appendChild(item)

// make the `container` div full width and center the items in it
.container {
     width: 100%;
     text-align:center;
}