Html 无论屏幕大小如何，如何将页脚文本居中放置在页面底部

这是我的html代码，我有一个困难的时间中心在页面底部的电子邮件。那么，无论屏幕大小如何，如何将页面底部的页脚文本居中

******插图

这是我的css代码，我尝试将页脚居中放置在页面的中间底部，但每次我使用不同的屏幕大小时，文本的位置都会发生变化，我如何避免这个问题

 <!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

.container {
    width : 900px;
    margin : 0 auto;
  }

 body {
    background :    url('images/black_background.jpg');
    width: 100%;
    height: 100%;
    possition: absolute;
    top: 0;
    left: 0:
    z-index: -5000;
    overflow-x:hidden


    }

header{
    min-width:  900px;
    height: 90px;
    background: url('images/header.jpg') 0 0 no-repeat;
    padding: 20px 0 0 0;
    color:  white;
    position: relative;
    right: -85x;
    color:          white;
    font-size:      3em;
    font-family:    Lucida Handwriting;


    }

nav{
    width:  900px;
    height: 40px;
    margin: 0 auto;
    color:  white;
    background: url();
    position: relative;
    right: 250px;
    top: -40px;
    height: 90px;
    min-width: 900px;

    }

/*#content{
    width: 900px;
    height: 650px;
    position: relative;
    left:   -45px;
    background:url('images/himba_tribes.jpg');

    }
    */

footer{
     position:absolute;
    bottom:-40;
    width:100%;
    height:60px;   /* Height of the footer */
    background:#6cf;
    border: 4px solid orange;
    clear: both;

    }

.集装箱{
宽度：900px；
保证金：0自动；
}
身体{
背景：url（'images/black_background.jpg'）；
宽度：100%；
身高：100%；
占有：绝对；
排名：0；
左：0:
z指数：-5000；
溢出-x：隐藏
}
标题{
最小宽度：900px；
高度：90px；
背景：url（'images/header.jpg'）0 0不重复；
填充：20px0；
颜色：白色；
位置：相对位置；
右：-85x；
颜色：白色；
字号：3em；
字体系列：露西达手写；
}
导航{
宽度：900px；
高度：40px；
保证金：0自动；
颜色：白色；
背景：url（）；
位置：相对位置；
右：250px；
顶部：-40px；
高度：90px；
最小宽度：900px；
}
/*#内容{
宽度：900px；
高度：650px；
位置：相对位置；
左：-45px；
背景：url（'images/himba_tribes.jpg'）；
}
*/
页脚{
位置：绝对位置；
底部-40；
宽度：100%；
高度：60px；/*页脚高度*/
背景：#6cf；
边框：4倍纯色橙色；
明确：两者皆有；
}

如果要使链接水平居中，请使用

文本对齐：居中在页脚上。如果你想让它粘在窗口的底部，使用一个
 试试这个：
将页脚设为div:

your@email

CSS应该是：

#footer{clear:both；margin:0 auto；text align:center}
谢谢，这是一个工作，但我希望它作为一个链接，因为它是一个电子邮件地址href将使它成为一个电子邮件链接

 <!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->

.container {
    width : 900px;
    margin : 0 auto;
  }

 body {
    background :    url('images/black_background.jpg');
    width: 100%;
    height: 100%;
    possition: absolute;
    top: 0;
    left: 0:
    z-index: -5000;
    overflow-x:hidden


    }

header{
    min-width:  900px;
    height: 90px;
    background: url('images/header.jpg') 0 0 no-repeat;
    padding: 20px 0 0 0;
    color:  white;
    position: relative;
    right: -85x;
    color:          white;
    font-size:      3em;
    font-family:    Lucida Handwriting;


    }

nav{
    width:  900px;
    height: 40px;
    margin: 0 auto;
    color:  white;
    background: url();
    position: relative;
    right: 250px;
    top: -40px;
    height: 90px;
    min-width: 900px;

    }

/*#content{
    width: 900px;
    height: 650px;
    position: relative;
    left:   -45px;
    background:url('images/himba_tribes.jpg');

    }
    */

footer{
     position:absolute;
    bottom:-40;
    width:100%;
    height:60px;   /* Height of the footer */
    background:#6cf;
    border: 4px solid orange;
    clear: both;

    }