如何使用CSS将内容集中在div中？_Css

如何使用CSS将内容集中在div中？

css

如何使用CSS将内容集中在div中？,css,Css,如何在div中水平和垂直居中放置内容？要水平对齐，非常简单： <style type="text/css"> body { margin: 0; padding: 0; text-align: center; } .bodyclass #container { width: ???px; /*SET your width here*/ margin: 0 auto; text-align: left; } </s

如何在div中水平和垂直居中放置内容？

要水平对齐，非常简单：

    <style type="text/css"> 
body  {
    margin: 0; 
    padding: 0;
    text-align: center;
}
.bodyclass #container { 
    width: ???px; /*SET your width here*/
    margin: 0 auto;
    text-align: left;
} 
</style>
<body class="bodyclass ">
<div id="container">type your content here</div>
</body>


身体{
保证金：0；
填充：0；
文本对齐：居中；
}
.bodyclass#容器{
宽度：？？？px；/*在此处设置宽度*/
保证金：0自动；
文本对齐：左对齐；
} 
在此处键入您的内容

对于垂直对齐，有点棘手：这是我的建议


带有CSS的通用垂直中心
.greenBorder{border:1px纯绿色；}/*只需边框即可查看*/
任何文本

任意高度

任何内容，例如从DB生成的内容

一切都垂直居中

2020年更新：有几个选项可用*：

*免责声明：此列表可能不完整

使用Flexbox
现在，我们可以使用flexbox。它是css转换选项的一个非常方便的替代品。我几乎总是使用这个解决方案。如果它只是一个元素，可能不是，但例如，如果我必须支持一个数据数组，例如行和列，我希望它们在中间相对居中

.flexbox{
显示器：flex；
高度：100px；
柔性流：行换行；
对齐项目：居中；
证明内容：中心；
背景色：#eaeaea；
边框：1个点#333；
}
.项目{
/*默认值=>flex:0 1自动*/
背景色：#fff；
边框：1个点#333；
框大小：边框框；
}


我以中间为中心。
我也集中在中间。

带有所有调整css。如果可能的话，用桌子把它包起来高度和宽度为100%，且

td通过使用transform:将其设置为垂直对齐到中间，文本对齐到中心

<div class="parent">
    <span>center content using transform</span>
    </div>

    //CSS
    .parent {
        position: relative;
        height: 200px;
        border: 1px solid;
    }
    .parent span {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }


使用变换中心内容
//CSS
.家长{
位置：相对位置；
高度：200px；
边框：1px实心；
}
.父跨度{
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}

thomas也看到了这一点，他在问：“如何使div的内容垂直和水平居中。”对于水平对齐，这可能会有所帮助：据我所知，无法在div中水平居中放置内容。这里只有表格选项。编程中只有两个难题：缓存无效和css中的居中。我希望div中的内容应该水平和垂直居中。不在页面中居中div。

<div class="parent">
    <span>center content using transform</span>
    </div>

    //CSS
    .parent {
        position: relative;
        height: 200px;
        border: 1px solid;
    }
    .parent span {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }