Saxon's blog1.子元素相对于父元素绝对定位，并且margin值减去自己宽高的一半
该方法具有一定的局限性，因为其必须要知道子元素本身的宽高
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red;
position: relative;
}
item{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100x;
background: green;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
2.子元素相对于父元素绝对定位，并且margin值为auto
该方式不受元素宽高所限制
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red;
position: relative;
}
item{
position: absolute;
left: 0;
right: 0;
bottom: 0;
top:0;
margin: auto;
width: 100px;
height: 100x;
background: green;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
3.diplay：table-cell
该方式是将元素转换成表格样式，再利用表格的样式来进行居中
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red;
display: table-cell;
vertical-align: middle;
}
item{
margin:0 auto;
width: 100px;
height: 100x;
background: green;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
4.绝对定位和transfrom
该方法用到了常CSS3的属性，当然存在兼容性问题
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red;
position:relative;
}
item{
width: 100px;
height: 100x;
background: green;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
5.css3中的flex属性
同样存在兼容性问题
<style>
body{margin: 0;}
.box{
width: 400px;
height: 400px;
border:1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
item{
width: 100px;
height: 100x;
background: green;
}
</style>
<body>
<div class="box">
<div class="item"></div>
</div>
</body>
最新评论
大神很棒。大神加油。
Base64： 可逆性。 可以将图片等二进制文件转换为文本文件。 可以把非ASCII字符的数据转换成ASCII字符，避免不可见字符。 MD5： 不可逆性。 任意长度的明文字符串，加密后得到的密文字符
第一个问题BASE64的加密方式和MD5的加密方式在这里 哪种 好用？
正则规则的原理可以多说一些
踩！ 我踩！ 我再踩！ 我用力踩！ 我很用力踩！ 我非常用力踩！ 我用尽全力去踩！ 就算鞋子烂也要踩！ 就算学校倒闭也要踩！
nb～！
double帅就是帅～
我们也是这样使用的