左右布局
1.浮动布局
左边元素左浮动，右边元素加上margin-left，实现左边固定，右边自适应的左右布局
html
CSS
*{
margin:0;
padding:0;
}
.left{
float:left;
width:200px;
}
.right{
mragin-left:200px;
}
2.浮动和负边距布局
HTML
CSS
*{
margin:0;
padding:0;
}
.left{
float:left;
width:200px;
margin-right:-100%;
background-color:red;
}
.right{
float:left;
width:100%;
}
.rightInner{
margin-left:200px;
background-color:green;
}
左中右布局
1.浮动布局
该方法需要注意的是，中间元素应该放在左右元素的后面。
HTML
CSS
*{
margin:0;
padding:0;
}
.left{
float:left;
width:100px;
background-color:red;
}
.right{
float:right;
width:100px;
background-color:green;
}
.middle{
background-color:yellow;
margin-left:100px;
margin-right:100px;
}
2.浮动+绝对定位布局
这个方法对middle元素的位置没有要求，可以放在语义上正确的位置上。
HTML
CSS
*{
margin:0;
padding:0;
}
.left{
float:left;
width:100px;
background-color:red;
}
.right{
float:right;
width:100px;
background-color:green;
}
.middle{
background-color:yellow;
position:absolute;
left:100px;
right:100px;
top:0;
}
3.flex布局
HTML
CSS
*{
margin:0;
padding:0;
}
body{
display:flex;
}
.left{
flex:0 0 80px;
background-color:red;
}
.middle{
flex:1;
background-color:yellow;
}
.right{
flex:0 0 150px;
background-color:green;
}
水平居中
水平居中的实现分为两种情况，第一种是元素的宽度已知，另一种是元素的宽度未知：
宽度已知
宽度已知的实现很简单，只需要将元素的CSS属性margin-left和margin-right设置为auto即可：
.center{
width:500px;
margin-left:auto;
margin-right:auto;
}
宽度未知
宽度未知的方法比较复杂而且有多种实现方式：
1.inline-block
HTML
CSS
*{
margin:0;
padding:0;
}
.pagination{
text-align:center;
font-size: 0;
letter-spacing: -4px;
word-spacing: -4px;
}
.pagination ul{
list-style:none;
}
.pagination li {
margin:0 5px;
line-height: 25px;
display:inline-block;
zoom:1;
letter-spacing:normal;
word-spacing: normal;
font-size: 12px;
}
.pagination a {
text-decoration: none;
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
background: black;
}
.pagination a:hover {
background-color: gray;
}
2.浮动+相对定位
HTML
CSS
*{
margin:0;
padding:0;
}
.pagination{
position:relative;
overflow:hidden;
}
.pagination ul{
list-style:none;
float:left;
clear:left;
position:relative;
left:50%;
}
.pagination li {
margin:0 5px;
line-height: 25px;
display:block;
float:left;
position:relative;
right:50%;
}
.pagination a {
text-decoration: none;
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
background: black;
}
.pagination a:hover {
background-color: gray;
}
3.绝对定位+相对定位
这种方式会限制元素的宽度只有父元素的50%，有一定的限制。
HTML
CSS
*{
margin:0;
padding:0;
}
.pagination{
position:relative;
}
.pagination ul{
list-style:none;
position:absolute;
left:50%;
}
.pagination li {
margin:0 5px;
line-height: 25px;
float:left;
position:relative;
right:50%;
}
.pagination a {
text-decoration: none;
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
background: black;
}
.pagination a:hover {
background-color: gray;
}
4.flex布局
HTML
CSS
*{
margin:0;
padding:0;
}
.pagination{
display:flex;
justify-content: center;
}
.pagination ul{
list-style:none;
overflow:hidden;
}
.pagination li {
margin:0 5px;
line-height: 25px;
float:left;
}
.pagination a {
text-decoration: none;
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
background: black;
}
.pagination a:hover {
background-color: gray;
}
5.CSS3的fit-content
fit-content是CSS3中的新属性，可以使元素不需要float、absolute、inline-block就自动收缩，方便布局，但目前来看兼容性还不那么好。
HTML
CSS
*{
margin:0;
padding:0;
}
.pagination{
width:fit-content;
margin-left:auto;
margin-right:auto;
}
.pagination ul{
list-style:none;
overflow:hidden;
}
.pagination li {
margin:0 5px;
line-height: 25px;
float:left;
}
.pagination a {
text-decoration: none;
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border-radius: 2px;
background: black;
}
.pagination a:hover {
background-color: gray;
}
垂直居中
1.table布局
table标签内td标签中的文档流会被自动居中。
HTML
| 垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中垂直居中 |
CSS
*{
margin:0;
padding:0;
}
table{
border:1px solid red;
height:500px;
}
2.before和after伪元素+display:inline-block
这个方法的缺点是需要设置垂直居中的元素的宽度，并且宽度不能超过父元素的宽度，还需要设置父元素的CSS属性text-align值为center。
HTML
CSS
.parent{
border: 3px solid red;
height: 600px;
text-align: center;
}
.child{
border: 3px solid black;
display: inline-block;
width: 300px;
vertical-align: middle;
}
.parent:before{
content:'';
outline: 3px solid red;
display: inline-block;
height: 100%;
vertical-align: middle;
}
.parent:after{
content:'';
outline: 3px solid red;
display: inline-block;
height: 100%;
vertical-align: middle;
}
3.修改div的display属性将其伪装成table
HTML
CSS
div.table{
display: table;
height: 600px;
}
div.td{
display: table-cell;
vertical-align: middle;
}
4.使用绝对定位
这个方法的局限就是需要确定垂直居中元素的高度。
HTML
CSS
*{
margin:0;
padding:0;
}
.parent{
border:1px solid red;
height:500px;
position:relative;
}
.child{
position:absolute;
left:50%;
top:50%;
height:100px;
width:300px;
overflow-y:scroll;
margin-top:-50px;
margin-left:-150px;
}
5.transform -50%
这个方法是目前来看比较好的方法，对垂直居中元素没有高度和宽度的限制。
HTML
CSS
.parent{
height: 600px;
position: relative;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
6.margin:auto
这个方法的缺点也是需要确定垂直居中元素的高度。
HTML
CSS
.parent{
height: 600px;
position: relative;
}
.child{
position: absolute;
height: 200px;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
7.flex布局
使用起来十分简单，但是IE6-9并不兼容。
HTML
CSS
.parent{
height: 600px;
display: flex;
justify-content: center;
align-items: center;
}
以上方法都是在已知父元素高度的基础上实现，而在高度未知的情况下，实现垂直居中就比较简单了，设置父元素的上下内边距相同即可，或者就是使用方法7的flex布局。
8618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
