优点:兼容性好;
不足:需要同时设置子元素和父元素
<divclass="parent"><divclass="child"></div></div>
.parent{width: 500px;height: 200px;background: red;text-align: center;}.child{display: inline-block;width: 300px;height: 100px;background: blue;}
优点:兼容性好
缺点:需要指定宽度
<divclass="parent"><divclass="child"></div></div>
.parent{width: 500px;height: 400px;background: red;}.child{margin: 0 auto;width: 300px;height: 100px;background: blue;}
优点:兼容性好
缺点:需要知道子元素的宽度
<div class="parent"> <div class="child"></div></div>
.parent { position: relative; top: 0; left: 0; width: 500px; height: 400px; background: red;}.child { position: absolute; top: 0; left: 50%; margin-left: -150px; width: 300px; height: 100px; background: blue;}
优点:不需要知道子元素的宽度
缺点:兼容性差 (新时代的你们,现在新的浏览器支持了,放心用了)
<divclass="parent"><divclass="child"></div></div>
.parent { position: relative; top: 0; left: 0; width: 500px; height: 400px; background: red;}.child { position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); width: 300px; height: 100px; background: blue;}
优点:简单
缺点:兼容性差 (新时代的你们,现在新的浏览器支持了,放心用了)
<divclass="parent"><divclass="child"></div></div>
.parent { display: flex; justify-content: center; width: 500px; height: 400px; background: red;}.child { width: 300px; height: 100px; background: blue;}
<divclass="parent"><divclass="child"></div></div>
.parent { width: 500px; height: 400px; background: red; display: table-cell; vertical-align: middle;}.child { width: 300px; height: 100px; background: blue;}
<divclass="parent"><divclass="child"></div></div>
.parent { width: 500px; height: 400px; background: red; line-height: 400px;}.child { width: 300px; height: 100px; background: blue; display: inline-block; vertical-align: middle;}
<divclass="parent"><divclass="child"></div></div>
.parent { position: relative; top: 0; left: 0; width: 500px; height: 400px; background: red;}.child { position: absolute; top: 50%; left: 0; transform: translate(0, -50%); width: 300px; height: 100px; background: blue;}
<divclass="parent"><divclass="child"></div></div>
.parent { position: relative; top: 0; left: 0; width: 500px; height: 400px; background: red;}.child { position: absolute; top: 50%; left: 0; margin-top: -50px; width: 300px; height: 100px; background: blue;}
<divclass="parent"><divclass="child"></div></div>
.parent { width: 500px; height: 400px; background: red; display: flex; align-items: center;}.child { width: 300px; height: 100px; background: blue;}
<divclass="parent"><divclass="child"></div></div>
.parent { width: 500px; height: 400px; background: red; display: table-cell; vertical-align: middle; text-align: center;}.child { width: 300px; height: 100px; background: blue; display: inline-block;}
<divclass="parent"><divclass="child"></div></div>
.parent { width: 500px; height: 400px; background: red; position: relative; left: 0; right: 0;}.child { width: 300px; height: 100px; background: blue; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
<divclass="parent"><divclass="child"></div></div>
.parent { width: 500px; height: 400px; background: red; display: flex; justify-content: center; align-items: center;}.child { width: 300px; height: 100px; background: blue;}
left{float:left;width:100px;} .right{margin-left:100px;}
<div class="left">left</div><div class="right">right</div>
* { margin: 0; padding: 0;}.left { height: 400px; width: 300px; background: red; float: left;}.right { height: 400px; margin-left: 300px; background: blue;}
<div class="parent"> <div class="left"> left </div> <div class="right-fix"> <div class="right"> right </div> </div></div>
* { margin: 0; padding: 0;}.left { width: 300px; height: 400px; float: left; background: red;}.right-fix { width: 100%; margin-left: -300px; float: right;}.right { margin-left: 300px; height: 400px; background: blue;}
.left{width:宽度值;float:left;} .right{overflow:hidden;}
<divclass="parent"><divclass="left"> left </div><divclass="right"> right </div></div>
/*设置overflow:hidden;创建BFC。根据BFC特性,BFC不会与float box 重叠。*/* { margin: 0; padding: 0;}.left { width: 300px; height: 400px; float: left; background: red;}.right { height: 400px; background: blue; overflow: hidden;}
table 实现
<div class="parent"> <div class="left"> left </div> <div class="right"> right </div></div>
* { margin: 0; padding: 0;}.parent { display: table; table-layout: fixed; width: 100%;}.left { width: 300px; height: 400px; background: red; display: table-cell;}.right { height: 400px; background: blue; display: table-cell;}
flex 实现
<div class="parent"> <div class="left"> left </div> <div class="right"> right </div></div>
* { margin: 0; padding: 0;}.parent { display: flex; width: 100%;}.left { width: 300px; height: 400px; background: red;}.right { height: 400px; background: blue; flex: 1;}
float margin 实现
<div class="parent"> <div class="left"> left </div> <div class="right"> right </div></div>
* { margin: 0; padding: 0;}.left { width: 100%; height: 400px; background: red; float: left; margin-right: -300px;}.right { height: 400px; background: blue; width: 300px; float: right;}
table 实现
<div class="parent"> <div class="left"> left </div> <div class="right"> right </div></div>
* { margin: 0; padding: 0;}.parent { width: 100%; display: table; table-layout: fixed;}.left { width: 100%; height: 400px; background: red; display: table-cell;}.right { height: 400px; background: blue; width: 300px; display: table-cell;}
flex 实现
<div class="parent"> <div class="left"> left </div> <div class="right"> right </div></div>
* { margin: 0; padding: 0;}.parent { width: 100%; display: flex;}.left { flex: 1; background: red; display: table-cell;}.right { height: 400px; background: blue; width: 300px;}
float margin 实现
<div class="parent"> <div class="left"> left </div> <div class="center"> center </div> <div class="right"> right </div></div>
* { margin: 0; padding: 0;}.parent { width: 100%;}.left,.center { background: red; float: left; width: 300px; height: 400px;}.center { background: yellow;}.right { height: 400px; background: blue; margin-left: 600px;}
float overflow 实现
<div class="parent"> <div class="left"> left </div> <div class="center"> center </div> <div class="right"> right </div></div>
* { margin: 0; padding: 0;}.parent { width: 100%;}.left,.center { background: red; float: left; width: 300px; height: 400px;}.center { background: yellow;}.right { height: 400px; background: blue; overflow: hidden;}
table 实现
<div class="parent"> <div class="left"> left </div> <div class="center"> center </div> <div class="right"> right </div></div>
*{
margin: 0;
padding: 0;
}
.parent{
width: 100%;
display: table;
table-layout: fixed;
}
.left,
.center{
background: red;
display: table-cell;
width: 300px;
height: 400px;
}
.center{
background: yellow;
}.right{
height: 400px;
background: blue;
display: table-cell;
}