<div>元素中的中心元素

要居中一个HTML元素，我可以使用CSS左:50%;。但是，这使得元素相对于整个窗口居中。

我有一个元素，它是<div>元素的子元素，我想让子元素以<div>这个父元素居中，而不是整个窗口。

我不希望容器<div>的所有内容居中，只是一个特定的子。

当前回答

为您的元素创建一个新的div元素居中，然后添加一个类专门为该元素居中，如下所示

<div id="myNewElement">
    <div class="centered">
        <input type="button" value="My Centered Button"/>
    </div>
</div>

Css

.centered{
    text-align:center;
}

其他回答

左:50%分别工作到最近的父静态宽度分配。尝试宽度:500px或在父div。或者，让你需要的内容居中显示:块，并设置左右边距为auto。

弯曲后，它显示文章

.container { 显示:flex; 颜色:蓝色; 背景颜色:黄色; justify-content:中心; ｝ < div class = "容器" > < div > < / div元素> < / div > 如果你水平和垂直地设置元素中心。

.container { 显示:flex; 颜色:蓝色; 身高:100 px; 背景颜色:黄色; justify-content:中心; 对齐项目:中心; ｝ < div class = "容器" > < div > < / div元素> < / div >

如果你想使用CSS3:

position:absolute;
left:calc(50% - PutTheSizeOfTheHalfOfYourElementpx);

您可能需要做进一步的搜索，以弄清楚如何使百分比适合元素的宽度。

指定text-align: center;到父对象并显示:inline-block;到div。

你可以像这样使用bootstrap flex类名:

<div class="d-flex justify-content-center">
    // the elements you want to center
</div>

即使里面有很多元素也可以。

推荐文章