Html 将“我的元素”切换为“我的元素”；位置：绝对“；防止它占据整个宽度

当我的container

div

设置为

display:block

和

position:static

时，我的登录页面的外观和行为符合我的要求。但是，当它变为

显示：内联块

或

位置：绝对

时，它将停止占用其最大宽度500px。我想使用绝对定位来垂直和水平居中我的div，所以我需要布局保持静态位置时的外观不变。我怎样才能做到这一点

*{
-moz盒尺寸：边框盒！重要；
-webkit框大小：边框框！重要；
框大小：边框框！重要；
}
身体{
字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线；
}
#登录框{
最大宽度：500px；
最小宽度：300px；
盒影：#BBB020px0；
显示：块；
位置：静态；
/*位置：绝对位置*/
}
#标题格式{
背景图像：url（'https://dummyimage.com/600x106/333333/fff.png&text=SOME+标志);；
背景重复：无重复；
背景尺寸：200px；
背景位置x：中心；
背景位置y:25px；
背景色：#000；
高度：110px；
文本对齐：居中；
线高：56px；
}
#头巾{
颜色：rgb（90,90,90）；
字体大小：粗体；
字体大小：12px；
边缘顶端：54px；
显示：内联块；
}
@介质（最小宽度：450px）{
#标题格式{
背景位置x:25px；
背景位置y：中心；
文本对齐：右对齐；
高度：95px；
线高：95px；
}
#头巾{
右边距：20px；
边际上限：0；
}
}
#DivForLoginForm{
背景：#b7d9ff；
背景：-webkit线性梯度（#b7d9ff，#fff）；
背景：-o-线性梯度（#b7d9ff，#fff）；
背景：-莫兹线性梯度（#b7d9ff，#fff）；
背景：线性梯度（#b7d9ff，#fff）；
文本对齐：居中；
}
#登录表单{
显示：内联块；
宽度：74%；
边缘顶部：20px；
边缘底部：40px；
}
#LoginForm input.textField{
显示：内联块；
宽度：100%；
填充：10px；
边缘顶部：18px；
字体大小：14px；
边界半径：3px；
边框：1px实心#999；
}
#术语包装器{
边缘顶部：16px；
边缘底部：30px；
文本对齐：左对齐；
字体大小：14px；
字体大小：粗体；
}
#术语包装输入{
左边距：0；
垂直对齐：-2px；
}
a[href]{
颜色：#0079dd；
文字装饰：无；
}
a[href]：悬停{
文字装饰：下划线；
}
输入#btn登录{
填充：14px；
高度：自动；
宽度：40%；
最小宽度：100px；
浮动：对；
背景色：#1064d8；
颜色：#fff；
字体大小：粗体；
字体大小：16px；
大纲：无！重要；
边界：无；
边界半径：3px；
光标：指针；
}
输入#btn登录：悬停{
背景色：#004BBF；
}
输入#btn登录：活动{
背景色：#0031A5；
}
#罗金福特酒店{
背景图像：url（“http://images.naldzgraphics.net/2014/08/20-brushed-seamless-texture.jpg");
颜色：rgb（100100100）；
填充：12px；
字体大小：11px；
}
[需要数据值]{
背景色：#fff；
}

|
我同意这个建议
©2009-2017 Some Company，LLC-保留所有权利

添加

宽度：100%

到

#登录框

，使其使用

最大宽度

规则

使用

位置：绝对顶部

、

左侧

和

转换

，使用

转换

功能将登录框水平和垂直居中

#login-box {
    width: 100%;
    max-width: 500px;
    min-width: 300px;
    box-shadow: #bbb 0 0 20px 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
}

*{
-moz盒尺寸：边框盒！重要；
-webkit框大小：边框框！重要；
框大小：边框框！重要；
}
身体{
字体系列：“Segoe UI”，塔荷马，日内瓦，Verdana，无衬线；
}
#登录框{
宽度：100%；
最大宽度：500px；
最小宽度：300px；
盒影：#BBB020px0；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
#标题格式{
背景图像：url（'https://dummyimage.com/600x106/333333/fff.png&text=SOME+标志);；
背景重复：无重复；
背景尺寸：200px；
背景位置x：中心；
背景位置y:25px；
背景色：#000；
高度：110px；
文本对齐：居中；
线高：56px；
}
#头巾{
颜色：rgb（90,90,90）；
字体大小：粗体；
字体大小：12px；
边缘顶端：54px；
显示：内联块；
}
@介质（最小宽度：450px）{
#标题格式{
背景位置x:25px；
背景位置y：中心；
文本对齐：右对齐；
高度：95px；
线高：95px；
}
#头巾{
右边距：20px；
边际上限：0；
}
}
#DivForLoginForm{
背景：#b7d9ff；
背景：-webkit线性梯度（#b7d9ff，#fff）；
背景：-o-线性梯度（#b7d9ff，#fff）；
背景：-莫兹线性梯度（#b7d9ff，#fff）；
背景：线性梯度（#b7d9ff，#fff）；
文本对齐：居中；
}
#登录表单{
显示：内联块；
宽度：74%；
边缘顶部：20px；
边缘底部：40px；
}
#LoginForm input.textField{
显示：内联块；
宽度：100%；
填充：10px；
边缘顶部：18px；
字体大小：14px；
边界半径：3px；
边框：1px实心#999；
}
#术语包装器{
边缘顶部：16px；
边缘底部：30px；
文本对齐：左对齐；
字体大小：14px；
字体大小：粗体；
}
#术语包装输入{
左边距：0；
垂直对齐：-2px；
}
a[href]{
颜色：#0079dd；
文字装饰：无；
}
a[href]：悬停{
文字装饰：下划线；
}
输入#btn登录{
填充：14px；
高度：自动；
宽度：40%；
最小宽度：100px；
浮动：对；
背景色：#1064d8；
颜色：#fff；
字体大小：粗体；
字体大小：16px；
大纲：无！重要；
边界：无；
边界半径：3px；
光标：指针；
}
输入#btn登录：悬停{
背景色：#004BBF；
}
输入#btn登录：活动{
背影