ブロックレベル要素の中央大法のまとめ
8089 ワード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
.undis{display: none;}
.box{width: 300px;height: 300px;margin: 0 auto;border: 1px solid #0000ff;position:relative;}
/*1*/
.div1{position:absolute;width:300px;height:300px;background:red; left:50%;top:50%;margin-left:-50px;margin-top:-50px;}
/*2*/
.div2{position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;width:300px;height:300px;background:blue;}
/*3*/
.div3{background:red;display:table-cell;vertical-align:middle;width:300px;height:300px; text-align:center;float: -left;/* */}
.div3 img{display: block;margin: 0 auto; width: 50%;}
/*4*/
.inner-table{display: table;width: 100%;height: 100%;}
.div4{background:red;display:table-cell;vertical-align:middle;text-align: center}
.div4 img{ width: 50%; margin: 0 auto;display: block;}
/*5*/
.div5{ height: 300px;display:-webkit-box;-webkit-box-pack: center;-webkit-box-align: center;}
.div5 img{display: block}
/*6*/
.div6{width:300px;height:100px;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background: red;}
/*7*/
.divbox7:before{content: "";display: inline-block;height: 100%;vertical-align: middle;background: #000000;}
.div7{display: inline-block;vertical-align: middle;width: 300px;background:red;}
</style>
</head>
<body>
<div class="div1 undis">position:absolute/fixed; </div>
<div class="div2 undis">position:absolute/fixed; ie67 ， </div>
<div class="box undis"> <div class="div3" ><img src="ma.jpg"> </div></div>
<div class="box undis"><div class="inner-table"><div class="div4"><img src="ma.jpg"></div> </div></div>
<div class="box undis"><div class="div5"><img src="ma.jpg"></div> </div>
<div class="div6 undis"></div>
<div class="box"> <div class="divbox7"><div class="div7">sd</div> </div></div>
</body>
</html>