Html 100%时样式栏中的文本绝对定位

我有一个100%宽度的标题栏和100%宽度的页脚的布局，但内容居中，只有800px宽

我试图在窗口拉伸时使文本浮动对正到内容区域，但找不到实现这一点的最佳方法

我尝试过在header div中进行绝对定位和相对定位，但当窗口拉伸时，我要么让文本1保持在同一位置，要么让文本1条完全左对齐

---

提前感谢

这就是您所期待的：

HTML:

你可以试试

您可以删除

width:100%

，因为它的块元素将采用全宽

并在页眉和页脚内添加一个div，宽度为800px，边距为0 auto 以内部内容为中心

HTML

HTML:

<div class="container">

    <header> <div class="content">Header Text</div> </header>

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

    <footer> <div class="content"> Footer Text</div> </footer>

</div>

.container{
    width:100%;
    height:100%;
}
header,footer{
    width:100%;
    height:50px;
    border:1px solid red;
    margin:0;padding:0;
}

.content{
    width:800px;
    height:100%;
    border:1px solid blue;
    text-align:justify;
}

---

发布相关代码please@user3777882：请讲清楚一点

<div class="container">

<header> <div class="cnt">Header Text</div> </header>

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

<footer><div class="cnt">Footer Text</div> </footer>

</div>

.container{

    height:100%;
}
   header,footer{

    height:50px;
    border:1px solid red;
}
.cnt,
  .content{
    width:800px;
    height:100%;
    border:1px solid blue;
    margin: 0 auto;
}

<div class="container">

    <header> <div class="content">Header Text</div> </header>

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

    <footer> <div class="content"> Footer Text</div> </footer>

</div>

.container{
    width:100%;
    height:100%;
}
header,footer{
    width:100%;
    height:50px;
    border:1px solid red;
    margin:0;padding:0;
}

.content{
    width:800px;
    height:100%;
    border:1px solid blue;
    text-align:justify;
}