紅色代碼 ：圖一 左右兩邊固定寬度div，（隨屏幕寬度改變）中間div自適應填滿中間的空間
紫色代碼：圖二 寬高固定的div，（隨屏幕寬度改變）水平自適應居中
藍色代碼：圖三 寬高不知道的div，（隨屏幕寬度改變）水平自適應居中
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.bl{width: 30px;height:100px;float: left;background-color: salmon;}
.br{width: 30px;height:100px;float: left;background-color: aqua;}
.bc{margin: 0 30px 0 30px; }
.boxA{width: 100%;height:100px;float: left;background-color: azure;}
</style>
</head>
<body>
<div class="bl"></div>
<div class="bc">
<div class="boxA">用內容測測試用的內容</div>
</div>
<div class="br"></div>
</body>
</html>
.div { width:200px; height:200px; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-110px; background:#f90;}
<div class="div">已知寬高的div自適應居中</div>
.a{float:left;height:50px;width:50%;margin-left:50%;background-color: aqua;}
.b{right:50%;height:40px;position: relative;background-color: red;}
<div class="a">
<div class="b">測測試用的內容</div>
</div>