Javascript 我如何在中间对齐我的文档片段？

我已经创建了一组按钮9x9，但它们位于左上角，我想将它们全部对齐在中间。我曾尝试使用

将其全部对齐，但不起作用，页面上也没有显示任何内容

    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); 
    } 

var docFrag=document.createDocumentFragment（）；
对于（var i=0；i<9；i++）{
var行=document.createElement（“tr”）
对于（var j=0；j<9；j++）{
var elem=document.createElement（'input'）；
elem.className='gumb'；
元素类型='按钮'；
…有些事。。。
文件附件（elem）；
            } 
文件.正文.附件（docFrag）；
document.body.appendChild（行）；
    } 

改用这个js：

//使用div将类添加到元素的中心
var item=document.createElement（'div'）；
item.className=“容器”；
对于（变量i=0；i<9；i++）{
var docFrag=document.createDocumentFragment（）；
var行=document.createElement（“br”）
对于（var j=0；j<9；j++）{
var elem=document.createElement（'input'）；
elem.className='gumb'；
元素类型='按钮'；
文件附件（elem）；
} 
项目.附件（文件格式）；
项目。追加子项（行）；
} 
document.body.appendChild（项）

//将“container”div设为全宽，并将其中的项目居中放置
.集装箱{
宽度：100%；
文本对齐：居中；
}

css中的

gumb

类字段是什么？一个

DocumentFragment

附加到DOM后就不是

DocumentFragment

。它只是作为单个元素附加在其中的元素。@AlirezaHI

.gumb{width:50px；height:50px；背景色：cadetblue；文本对齐：居中；字体大小：25px；颜色：白色；页边距底部：10px；垂直对齐：中间；}。gumb:focus{background color:red；}

我的意思是，我可能会把它们放在一个包装纸里，然后用它把它们放在一个漂亮的格子里。不是吹嘘我自己，但这就是我在自己的网站上为一个“扫雷舰”克隆所做的：）。这个克隆是用JS编写的，使用React和Redux。如果您有兴趣，可以在GitHub上找到所有代码：。这只会将我的所有按钮放在一行1x81:/@klopa I更改解决方案。试试这个。添加代码解释通常会导致更多的赞成票而不是反对票…@HereticMonkey tnx供您评论。我添加了一些注释来解释解决方案。