CODEWITHSUNDEEP
htmlcss
BlackFire27
BlackFire27

Reputation: 1550

How do I position a div at the bottom center of the screen

I have this css:

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

I have this html:

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

</div>

How do we position that div at the bottom center of the screen?!?

Upvotes: 53

Views: 200283

Answers (9)

mutp
mutp

Reputation: 2389

If you aren't comfortable with using negative margins, check this out.

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

Especially useful when you don't know the width of the div.

Upvotes: 96

Emiliano Molina Gonz&#225;lez
Emiliano Molina Gonz&#225;lez

Reputation: 101

First make a container so you can move it with more freedom:

<div class="container">
  <div id="manipulate"></div>
</div>

then:

.container{
  height: 100vh; ------>adjust it. Should fit wherever you need to put it
  display: flex;
  flex-direction: column;
  justify-content: end;
}

#manipulate{
  width: min(70vw - 5px, 750px); ------>responsive stuff
  height: 90vh;
  margin-inline: auto;
}

Upvotes: 1

Ferdaus Zaman Polok
Ferdaus Zaman Polok

Reputation: 117

100% working single line (Inline CSS Solve)

<div style="padding: 20px; width: 100%; text-align: center;">Your Content Here</div>

Upvotes: 0

Ferdaus Zaman Polok
Ferdaus Zaman Polok

Reputation: 117

100% working single line (Inline CSS Solve)

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

Upvotes: 0

Farid
Farid

Reputation: 1665

Using a Flexbox worked for me:

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

Upvotes: 7

MatthewK
MatthewK

Reputation: 476

Here is a solution with two divs:

HTML:

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

CSS:

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

Upvotes: 15

Shawn Taylor
Shawn Taylor

Reputation: 3969

You can center it using negative margins BUT please note that it'll center exactly on the center of the screen IF any containing div is NOT SET to position:relative;

For example. http://jsfiddle.net/aWNCm/

So, best way to exactly center this div is to set correct properties position properties for its containing divs too otherwise it will be lost in some random ways.

Upvotes: 2

Alex
Alex

Reputation: 35409

Use negative margins:

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

The key here is the width, left and margin-left properties.

Upvotes: 22

Purag
Purag

Reputation: 17061

align="center" has no effect.

Since you have position:absolute, I would recommend positioning it 50% from the left and then subtracting half of its width from its left margin.

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

Upvotes: 45

Related Questions