CSS常见布局及各种居中

前端知识点

左右布局

左侧固定，右侧自适应

预览链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* css*/
.left {
    float: left;
    width: 300px;
    height: 300px;
    background-color: gray;
    margin-right: -100%;
}
.right {
    float: left;
    width: 100%;
}
.right-content {
    height: 300px;
    margin-left: 310px;
    background-color: black;
}

/*html*/
<body>
    <div class="left"></div>
    <div class="right">
      <div class="right-content"></div>
    </div>
</body>

左中右布局

左右固定，中间自适应

预览链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/*css*/

#container{  
    position:relative;  
    margin:20px;  
    height:400px;  
}  
#left_side{  
    position:absolute;  
    top:0px;  
    left:0px;  
    border:solid 1px #0000FF;  
    width:170px;  
    height:100%;  
}  
#content{  
    margin:0px 190px 0px 190px;  
    border:solid 1px #0000FF;  
    height:100%;  
}  
#right_side{  
    position:absolute;  
    top:0px;  
    right:0px;  
    border:solid 1px #0000FF;  
    width:170px;  
    height:100%;  
}

/*html*/
<div id="container">  
    <div id="left_side">left_side</div>  
    <div id="content">content</div>  
    <div id="right_side">right-side</div>  
</div>

水平居中

  • 块级元素
1
margin:0 auto;
  • 行内元素
1
text-align:center

垂直居中

  • 行内元素
1
2
3
4
.box {
  padding-top: 30px;
  padding-bottom: 30px;
}

等其他小技巧

各种居中请搜索google 关键字 css center tricks

你会得到这个链接 各种居中的解决方案