标签：web 受限 cal 标签 nbsp color 不能 ati blank
1、绝对定位居中（子元素需设置宽高）
内容块的父容器：
position:relative;
子元素： （必须设置高度）
position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin:auto;
2、绝对定位配合margin（子元素需设置宽高）
第一种
<style> .one{ border: 1px solid red; width: 200px;height: 200px; position: relative; } .two{ background: red; width: 100px;height: 100px position: absolute;left: 50%;top:50%; margin: -50px 0 0 -50px; //（margin设置百分比是相当于自身的高度与宽度）
}
</style>
<div class="one">
<div class="two"></div>
</div>
第二种
<style> .one{ border: 1px solid red; width: 300px;height: 300px; position: relative; } .two{ position:absolute; top:50%; left:0; right:0; margin:auto; margin-top:-100px; //（margin设置百分比是相当于自身的高度与宽度） width:200px; height:200px; background: red; } </style> <div class="one"> <div class="two"></div> </div>
3、table-cell方式（子元素不需设置宽高）
父容器：（设置宽高）
display:table-cell;text-align:center;vertical-align:middle;
子元素：
display:inline-block;vertical-align:middle;
<style> .one{ border: 1px solid red; width: 200px;height: 200px; display:table-cell;vertical-align:middle;text-align: center; } .two{ background: red; (1)display:inline-block;(用此方法向上偏差2px) (2)margin:auto（垂直水平居中） } </style> <div class="one"> <div class="two">11111111111</div> </div>
4、通过添加空span标签使图片居中（子元素需设置宽高）
父容器：
text-align: center;
<span>：
display: inline-block; //将行内元素改变为行内块元素显示 width: //1px; 实现ＩＥ下可读效果 height: 100%; //使用元素高度和图片容器高度一样 vertical-align: middle; //垂直对齐
图片：
vertical-align: middle;
<style> .one{ border: 1px solid red; width: 200px;height: 200px; text-align: center; } span{ display: inline-block; width: 1px; height: 100%; vertical-align: middle; } </style> <div class="one"> <span></span> <img src="../img/jian.png" > </div>
5、外边距margin取负数，大小为width/height（不使用box-sizing: border-box时包括padding，）的一半，再加上top: 50%; left: 50%;。
（子元素需设置宽高）
<style> .one{ border: 1px solid red; width: 200px;height: 200px; position: relative; } .two{ background: red; width: 30px; height: 20px; padding: 20px; position: absolute; top: 50%; left: 50%; margin-left: -35px; /* (width + padding)/2 */ margin-top: -30px; /* (height + padding)/2 */ } </style> <div class="one"> <div class="two"></div> </div>
6、内容定义transform:translate(-50%,-50%),并且加上top：50%；left：50%。（子元素需设置宽高）
<style> .one{ border: 1px solid red; width: 200px;height: 200px; position: relative; } .two{ background: red; width: 50%; height: 30%; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } </style> <div class="one"> <div class="two"></div> </div>
7、增加额外子元素设置margin-bottom为内容元素的高度+padding的一半。（不能实现水平垂直居中，仅垂直居中）
<style> .one{ border: 1px solid red; width: 200px;height: 200px; } .floater{ float: left; height: 50%; width: 100%; margin-bottom: -10%; } .two{ clear: both; height: 20%; background: red; } </style> <div class="one"> <div class="floater"></div> <div class="two"></div> </div>
8、inline-block方式（子元素不需设置宽高）
<style> .one{ border: 1px solid red; width: 300px;height: 300px; text-align: center; } .one:after{ content: ‘‘; display: inline-block; vertical-align: middle; height: 100%; } .two{ background: red; display:inline-block; vertical-align:middle; } </style> <div class="one"> <div class="two">11111111111111111111</div> </div>
9、弹性盒式布局（子元素不需设置宽高）
[CSS弹性盒][1]
第一种
<style> .one{ border: 1px solid red; width: 300px;height: 300px; display: flex; align-items: center; justify-content: center; } .two{ background: red; } </style> <div class="one"> <div class="two">111111111111</div> </div>
第二种
<style>
.one{
border: 1px solid red;
width: 300px;height: 300px;
display: flex;
}
.two{
background: red;
margin:auto;
}
</style>
<div class="one">
<div class="two">111111111111</div>
</div>
标签：web 受限 cal 标签 nbsp color 不能 ati blank
原文地址：http://www.cnblogs.com/wangadai/p/7159747.html
