@EncyKe
2015-09-23T15:30:40.000000Z
字数 7511
阅读 3086
CSS
前端
margin: 0 auto;
自动边距
<div class="father" style="height:300px;">
<div class="son" style="width:300px; height:100%; margin:0 auto;">
</div>
</div>
示例:
(子):width + margin:0 auto;
优点:兼容性强;简单易懂;
缺点:子元素宽度固定,扩展性、适应性差;
<div class="father" style="height:300px;">
<div class="son" style="width:fit-content; width:-webkit-fit-content; height:100%; margin:0 auto;">
</div>
</div>
示例:
(子):(-前缀-)width:fit-content; + margin:0 auto;
优点:子元素宽度不固定,扩展性强;简单易懂;
缺点:兼容性差;
注意:子元素内需有文本才能撑开宽度,且对文本建议使用padding;
<div class="father" style="height:300px;">
<div class="son" style="width:300px; height:300px; position:absolute; left:50%; margin-left:-150px;">
</div>
</div>
示例:
(子):absolute + left:50%; + margin-left:-宽度/2;
优点:兼容性强;
缺点:原理复杂;子元素宽度固定,扩展性差;
<div class="grandpa" style="height:300px;">
<div class="father" style="position:absolute; left:50%;">
<div class="son" style="height:300px; position:relative; right:50%;">
</div>
</div>
</div>
示例:
(父):absolute + left:50%;
(子):relative + right:50%;
优点:子元素宽度不固定,扩展性强;兼容性强;
缺点:原理复杂;
注意:结合浮动法,需升格父级;
插入父元素,设置绝对定位左50%;
子元素设置相对定位右50%;
inline-block
内联化
<div class="father" style="height:300px; text-align:center;">
<div class="son" style="width:600px; height:100%; display:inline-block;">
</div>
</div>
示例:
(父):text-align:center;
(子):display:inline-block;
优点:简单易懂;扩展性强;
缺点:inline-block兼容性差;
注意:需额外处理inline-block浏览器差异;
<div class="grandpa" style="height:300px;">
<div class="father" style="position:relative; left:50%; float:left;">
<div class="son" style="height:300px; position:relative; right:50%; float:left;">
</div>
</div>
</div>
示例:
(父):relative + left:50%; + float:left;
(子):relative + right:50%; + float:left;
优点:兼容性强;子元素宽度不固定,扩展性强;
缺点:原理复杂;
注意:原父元素升格为爷级,不作处理;
插入一个左浮动、相对左50%的父元素;
子元素左浮动、相对右50%;
<div class="father" style="height:300px;">
<div class="son" style="height:300px;">
</div>
</div>
.father {
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
display: -o-box;
-o-box-orient: horizontal;
-o-box-pack: center;
display: -ms-box;
-ms-box-orient: horizontal;
-ms-box-pack: center;
display: box;
box-orient: horizontal;
box-pack: center;
}
示例:
(父):display:(-前缀-)box; + (-前缀-)box-orient:horizontal;
+ (-前缀-)box-pack:center;
优点:实现便捷;宽度不固定,扩展性强;
缺点:兼容性差;
注意:子元素内需有文本才能撑开宽度,且对文本建议使用padding;;
text-align:center;
<div class="father" style="height:300px; text-align:center;">
<div class="son" style="height:300px; width:600px; display:inline-block; position:absolute; margin-left:-300px;">
</div>
</div>
示例:
(父):text-align:center;
(子):inline-block + 绝对定位 + margin-left:-宽度/2;
优点:简单易懂;
注意:居中对空格起作用;绝对定位元素则跟随空格;
<div class="father" style="line-height:300px; height:300px;">
<!-- Content goes here -->
</div>
示例:
(父):height == line-height
优点:兼容性强;父级无足够空间时不会被截断;
缺点:只适用单行文本(块级无效、多行糟糕);
注意:段落=子元素;
<div class="father" style="padding:120px;">
<!-- Content goes here -->
<!-- Content goes here -->
</div>
示例:
(父):无height + 上下padding值相同;
优点:兼容性强;子元素高度不固定,扩展性强;
注意:段落=子元素;
<div class="father" style="width:100%; display:table;">
<div class="son" style="vertical-align:middle; display:table-cell;">
<!-- Content goes here -->
<!-- Content goes here -->
</div>
</div>
示例:
(父):width:100%; + height + display:table;
(子):vertical-align:middle; + display:table-cell;
优点:子元素高度不固定,扩展性强;
缺点:兼容性差 (IE 8-不支持);
注意:段落∈子元素;
.grandpa {
display:table;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
height:400px;
_position:relative;
overflow:hidden;
}
.father {
vertical-align:middle;
display:table-cell;
_position:absolute;
_top:50%;
}
.son {
_position:relative;
_top:-50%;
}
<div class="grandpa">
<div class="father">
<div class="son">
<!-- Content goes here -->
</div>
</div>
</div>
示例:
无示例。
原理同方法零中第3);
<div class="grandpa" style="width:100%; height:300px; display:table;">
<div class="father" style="vertical-align:middle; display:table-cell;">
<div class="son">
</div>
</div>
</div>
(爷):width:100%; + height + display:table;
(父):vertical-align:middle; + display:table-cell;
优点:子元素高度不固定,扩展性强;
缺点:兼容性差 (IE 8-不支持);
注意:即替换文本为一个div
<div class="father" style="height:300px;position:relative;">
<div class="son" style="width:100%; height:150px; position:absolute; top:50%; margin-top:-75px; ">
</div>
</div>
示例:
(子):绝对定位 + top:50%; + margin-top:-高度/2; + width:100%;
优点:兼容性强;
缺点:原理复杂;子元素高度固定,扩展性差;宽度按文本填充,不继承;
<div class="father" style="height:300px;">
<div class="floater" style="float:left; height:50%; margin-bottom:-90px;"></div><div class="son" style="clear:both; height:180px; position:relative;">
</div>
</div>
示例:
浮动空元素:左浮动 + height:50%; + margin-bottom:-子元素高度/2
(子):相对定位 + 清除两侧浮动 + height
优点:兼容性强;
缺点:子元素高度固定;需要额外的空元素;
margin:atuo
<div class="father" style="height:300px; position:relative;">
<div class="son" style="position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; height:180px;">
</div>
</div>
示例:
(父):非默认定位 + height
(子):绝对定位 + 四边定位:0 + margin:auto + height
优点:简单易用;
缺点:兼容性差 (IE 8-无效);子元素高度固定,且会被截断;
transform
<div class="father" style="height:300px;">
<div class="son" style="position:relative; top:50%; -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -ms-transform:translateY(-50%); -moz-transform:translateY(-50%); transform: translateY(-50%);">
</div>
</div>
示例:
(子):相对定位 + top:50%; + (-前缀-)transform: translateY(-50%);
优点:简单易懂;子元素高度不固定;
缺点:兼容性差;
margin
<div class="father" style="height:300px; position:relative;">
<div class="son" style="width:600px; height:200px; position:absolute; margin-top:-100px; top:50%; margin-left:-300px; left:50%;">
</div>
</div>
示例:
(父):非默认定位
(子):width + height + 绝对定位 + top:50%; + left:50%;
+ margin:-高度/2 0 0 -宽度/2;
优点:简单易懂;兼容性好;
缺点:非响应式;扩展性差,内容溢出;
transform:translate(-50%,-50%)
<div class="father" style="height:300px;">
<div class="son" style="width:600px; position:relative; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%);">
</div>
</div>
示例:
(子):width + 相对定位 + top:50%; + left:50%;
+ (-前缀-)transform:translate(-50%,-50%);
优点:子元素高度不固定,扩展性强;
缺点:兼容性差;
inline-block
化
.father {
text-align: center;
overflow: auto;
}
.father:after,
.son {
display: inline-block;
vertical-align: middle;
}
.father:after {
content: '';
height: 100%;
margin-left: -0.25em;
/* To offset spacing. May vary by font */
}
.son {
max-width: 99%;
/* Prevents issues with long content causes the content block to be pushed to the top */
/* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}
<div class="father">
<div class="son">
<!-- Content goes here -->
</div>
</div>
示例:
无示例。
优点:子元素高度不固定;兼容性强;
缺点:结构复杂;margin-left:-0.25em
样式需为不同字体大小作调整;
margin: 0 auto;
<div class="grandpa" style="width:100%; height:300px; display:table;">
<div class="father" style="display:table-cell; vertical-align:middle;">
<div class="son" style="width:70%; margin: 0 auto;">
</div>
</div>
</div>
示例:
(爷):display:table;
(父):display:table-cell; + vertical-align:middle;
(子):width + margin: 0 auto;
优点:兼容性好;子元素高度不固定;
缺点:结构繁琐;
.father {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
示例:
无示例。
优点:宽高任意,扩展性好;
缺点:兼容性差;性能问题;需在<body>
上写样式;