css 如何将div放置在屏幕的底部中心

f0ofjuux  于 2022-12-01  发布在  其他
关注(0)|答案(8)|浏览(220)

我有这个css:

#manipulate
{
  position:absolute;
  width:300px;
  height:300px;
  background:#063;
  bottom:0px;
  right:25%;
}

我有这个html:

<div id="manipulate" align="center">

</div>

我们如何将div放置在屏幕底部的中心位置?!?

yqlxgs2m

yqlxgs2m1#

如果您不习惯使用负边距,请查看以下内容。

HTML -

<div>
 Your Text
</div>

CSS -

div {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, -50%);
  margin: 0 auto;
}

当您不知道div的宽度时特别有用。

guicsvcw

guicsvcw2#

align="center"不起作用。
由于您有position:absolute,我建议将其放置在距左侧50%的位置,然后从其左边距中减去其宽度的一半。

#manipulate {
    position:absolute;
    width:300px;
    height:300px;
    background:#063;
    bottom:0px;
    right:25%;
    left:50%;
    margin-left:-150px;
}
hvvq6cgz

hvvq6cgz3#

使用负边距:

#manipulate
{
  position:absolute;
  width:300px;
  height:300px;
  margin-left:-150px;
  background:#063;
  bottom:0px;
  left:50%;
}

这里的关键是widthleftmargin-left属性。

goucqfw6

goucqfw64#

下面是一个包含两个div的解决方案:
于飞:

<div id="footer">
        <div id="center">
            Text here
        </div>
    </div>

CSS:

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}
#center {
    width: 500px;
    margin: 0 auto;
}
3qpi33ja

3qpi33ja5#

使用Flexbox对我很有效:

#manipulate {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center; // Centers the item
  bottom: 10px; // Moves it up a little from the bottom
}
n53p2ov0

n53p2ov06#

您可以使用负边距将其居中,但请注意,如果任何包含div的div未设置为position:relative,则它将精确地居中在屏幕的中心;
例如. http://jsfiddle.net/aWNCm/
因此,使此div精确居中最好方法是为其包含div设置正确属性位置属性,否则它将以某种随机方式丢失

8gsdolmq

8gsdolmq7#

100%工作单行(内联CSS求解)

<div style="position: fixed; bottom: 10px; width: 100%; text-align: center;">Your Content Here</div>
5sxhfpxr

5sxhfpxr8#

100%工作单行(内联CSS求解)

<div style="position: fixed; bottom: 10px; width: 100%; text-align: center;">Your Content Here</div>

相关问题