Center 3 divs 水平全屏答案

【问题标题】：Center 3 divs horizontal fullscreenCenter 3 divs 水平全屏
【发布时间】：2017-06-02 13:39:28
【问题描述】：

请参考下图（浏览器屏幕）： A、B、C 和 D 是 div。 A 和 C 具有固定的高度和宽度 = 100%。 D 是以 B 为中心的 div。有人可以帮忙用css代码来完成这个吗？

如果可能，必须与 IE6 兼容。

【问题讨论】：

你试过了吗？
D是固定高度还是动态的？
@Dominic: 它有一个固定的高度
@Kyle：到目前为止我会发布我的解决方案
有些人（包括我）不喜欢这个想法，但是如果您需要支持 IE6，则使用具有 3 行的 HTML 表格和第 2 行内的居中 DIV 会起作用。否则，您必须使用一点 CSS 和 conditional comments 才能使 IE6 以与其他浏览器相同的方式正确布局元素。

标签： css html internet-explorer-6 fullscreen center

【解决方案1】：

您可以使用各种 css 属性来获取它。这是一个使用您的依赖项进行更改的示例

#A{
height: 100px;
background-color: orange;
}
#B{
height: inherit;
}
#D{
display: inline-block;
position: relative;
top: 50%;
left: 50%;
margin-top: 70px;
margin-left:-100px;
}
#C{
height: 100px;
background-color: green;
position: absolute;
bottom: 0px;
width: 100%;
}

See Demo

【讨论】：

【解决方案2】：

HTML：

<body>
  <div id="a">
  </div>
  <div id="b">
     <div id="d">
     </div>
  </div>
  <div id="c">
  </div>
</body>

CSS：

body{
width:500px;
background:red;   
}
div#a{
height:100px;
width:100%;
border:2px solid black;
margin-bottom:20px;
}
#b{
height:300px;
width:100%;
border:2px solid black;
}
#c{
margin-top:20px;
height:100px;
width:100%;
border:2px solid black;
}
div #d{
height:200px;
width:70%;
background:blue;
margin: 0 auto;
margin-top:50px;
}

我不知道这是否与 IE6 兼容。你可以试试。我把边界只是为了测试目的。你可以在 CSS 中删除它。 JS小提琴链接： http://jsfiddle.net/sqrcE/

【讨论】：

谢谢，宽度和高度不是全屏的 :-)
抱歉，我没有完全理解您的意思。您可以输入正文高度来控制整体页面高度。类似地，您可以将主体的宽度更改为像素以获得所需的结果。希望这会有所帮助。

【解决方案3】：

试试这个 html 和 css： HTML：

<div class="box-wrap">
<div id="A">A</div>
<div id="B">
    <div id="D">D</div>
</div>
<div id="C">C</div>
</div>

CSS：

.box-wrap{
border: 1px solid #000000;
height: 267px;
margin: 10px;
padding: 5px;
width: 357px;
}
#A{margin-bottom:5px;}
#C{margin-top:5px;}
#A,
#C{
background:#857a60;
height:70px;
width:100%;
}
#D{
background:#0096FF;
height: 93px;
margin: 0 auto;
width: 219px;
}
#B{
background: #857A60;
display: table-cell;
height: 117px;
position: static;
vertical-align: middle;
width: 357px;
}

http://jsfiddle.net/rakesh_vadnal/JjPcX/3/

【讨论】：