定位：三种
<div class="father"> <div class="son"> </div> </div> <style> .father { position: relative; } .son { position: absolute; width: 100px; height: 100px; //第一种方案，需要知道宽高 top: 50%; left: 50% margin-top: -50px; margin-left: -50px //第二种方案，需要有宽高 top: 0; left: 0; right: 0; bottom: 0; margin: auto; //第三种方案,不兼容 top: 50%; left: 50%; transform: translate(-50%, -50%); } </style>display:flex
<div class="father"> <div class="son"> </div> </div> <style> //兼容问题 .father { display: flex; justify-content: center; align-items: center; } </style>display:table-cell
<div class="father"> <div class="son"> </div> </div> <style> .father { //要求盒子固定宽高 width: 500px height: 500px display: table-cell; vertical-align: middle; text-align: center; } .son { display: inline-block; } </style>圣杯布局 => 左右固定，中间自适应
<div class="container clearfix"> <div class="center"></div> <div class="left"></div> <div class="right"></div> </div> <style> html, body { height: 100%; overflow: hidden; } .container { width: 100%; padding: 0 200px; } .left, right { width: 200px; min-height: 200px; background: lightblue; } .ccenter { width: 100%; min-height: 400px; backgraound: lightsalmon; } .left, .center, .right { float: left; } .left { margin-left: -100%; position: relative; left: -200px; }, .right { margin-right: -200px } </style>双飞翼布局
<body class=“clearfix”> <div class="container"> <div class="center"></div> </div> <div class="left"></div> <div class="right"></div> </body> <style> html, body { height: 100%; overflow: hidden; } .left, .center, .right { float: left; } .container { width: 100%; } .contain .center { margin: 0 200px; min-height: 400px; background: lightsalmon; } .left, .right { width: 200px; min-height: 200px; background: lightblue; } .left { margin-left: -100%; } .right { margin-left: -200px; } </style>使用CALC
.center { width: calc(100% - 400px); min-height: 400px; background: lightsalmon; }Flex实现
<div class="container"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> <style> html, body { overflow: hidden; } .container { display: flex; justify-content: space-between; height: 100%; } .left, .right { flex: 0 0 200px; height: 200px; background: lightblue; } .center { flex: 1; min-height: 400px; background: lightsalmon; } </style>定位实现
html, body { height: 100%; overflow: hidden; }. .container { positoin: relative; height: 100%; } .left, .right { position: absolute; top: 0; width: 200px min-height: 200px; background: lightblue; } .left { left: 0; } .right { right: 0; } .center { margin: 0 200px; min-height: 400px; background: lightsalmon; }