CSS: fijo al fondo y centrado

Necesito que mi pie de página se fije al final de la página y lo centre. El contenido del pie de página puede cambiar en todo momento, por lo que no puedo centrarlo a través de margin-left: xxpx; margen derecho: xxpx;

El problema es que por alguna razón esto no funciona:

#whatever {
  position: fixed;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
}

Busqué en la web y no encontré nada. Intenté hacer un contenedor div y nada. Probé otras combinaciones y gurnisht. ¿Cómo puedo hacer que esto suceda?

Gracias

Debería usar una solución de pie de página pegajosa como esta:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Hay otros como este;

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}

con el html:

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>

código revisado por Daniel Kanis :

solo cambia las siguientes líneas en CSS

.problem {text-align:center}
.enclose {position:fixed;bottom:0px;width:100%;}

y en html:

<p class="enclose problem">
Your footer text here.
</p>

Una solución jQuery

$(function(){
    $(window).resize(function(){
        placeFooter();
    });
    placeFooter();
    // hide it before it's positioned
    $('#footer').css('display','inline');
});

function placeFooter() {    
    var windHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var offset = parseInt(windHeight) - parseInt(footerHeight);
    $('#footer').css('top',offset);
}

<div id='footer' style='position: fixed; display: none;'>I am a footer</div>

A veces es más fácil implementar JS que piratear CSS antiguo.

http://jsfiddle.net/gLhEZ/

El problema radica en position: static. Estático significa que no hagas nada con la posición. position: absolutees lo que quieres. Sin embargo, centrar el elemento sigue siendo complicado. Lo siguiente debería funcionar:

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 0px;
  right: 0px;
}

o

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 50%;
  transform: translate(-50%, 0);
}

Pero recomiendo el primer método. Utilicé técnicas de centrado de esta respuesta: ¿Cómo centrar un elemento absolutamente posicionado en div?

Hay 2 problemas potenciales que veo:

1 - IE ha tenido problemas con la posición: arreglado en el pasado. Si está utilizando IE7 + con un tipo de documento válido o un navegador que no es IE, esto no es parte del problema

2 - Debe especificar un ancho para el pie de página si desea que el objeto de pie de página esté centrado. De lo contrario, el valor predeterminado es el ancho completo de la página y el margen automático para la izquierda y la derecha se establece en 0.Si desea que la barra de pie de página ocupe el ancho (como la barra de aviso de StackOverflow) y centre el texto, entonces necesita para agregar "text-align: center" a su definición.

He encerrado el 'problema div en otro div', llamemos a este div el div delimitado ... haga que el div delimitado en css tenga un ancho de 100% y la posición se haya arreglado con un fondo de 0 ... luego inserte el div del problema en el div adjunto así es como se vería

#problem {margin-right:auto;margin-left:auto; /*what ever other styles*/}
#enclose {position:fixed;bottom:0px;width:100%;}

luego en html ...

<div id="enclose">
    <div id="problem">
    <!--this is where the text/markup would go-->
    </div>
</div>

¡Ahí tienes!
- hipertexto

Basado en el comentario de @Michael:

Hay una mejor forma de hacer esto. Simplemente cree el cuerpo con la posición: relativa y un relleno del tamaño del pie de página + el espacio entre el contenido y el pie de página que desee. Luego solo crea un div de pie de página con un absoluto y un fondo: 0.

Fui a buscar la explicación y se reduce a esto:

• De forma predeterminada, la posición absoluta de bottom: 0px lo establece en la parte inferior de la ventana ... no en la parte inferior de la página.
• El posicionamiento relativo de un elemento restablece el alcance de la posición absoluta de sus hijos ... por lo que al configurar el cuerpo en el posicionamiento relativo, la posición absoluta de bottom: 0px ahora refleja realmente la parte inferior de la página.

Más detalles en http://css-tricks.com/absolute-positioning-inside-relative-positioning/

aquí hay un ejemplo usando css grid.

html, body{
    height: 100%;
    width: 100%;
}
.container{
    height: 100%;
    display:grid;
    /*we divide the page into 3 parts*/
    grid-template-rows: 20px auto  30px;
    text-align: center;   /*this is to center the element*/ 
    
}

.container .footer{
    grid-row: 3;   /*the footer will occupy the last row*/
    display: inline-block;
    margin-top: -20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="header">

        </div>
        <div class="content">

        </div>
        <div class="footer">
            here is the footer
        </div>
    </div>
</body>
</html>

puedes usar css grid: un ejemplo concreto

Me encontré con un problema donde lo típico position: fixedy bottom: 0no funcionó. Descubrió una funcionalidad ordenada con position: sticky. Tenga en cuenta que es "relativamente" nuevo, por lo que no lo será con IE / Edge 15 y versiones anteriores.

Aquí hay un ejemplo de w3schools.

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: sticky;
  bottom: 0;
  background-color: yellow;
  padding: 30px;
  font-size: 20px;
}
</style>
</head>
<body>

<p>Lorem ipsum dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est,  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas </p>

<div class="sticky">I will stick to the screen when you reach my scroll position</div>

</body>
</html>