[TOC]
flex实现圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圣杯布局</title>
<style>
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
background: red;
flex: 0 0 50px;
}
section {
flex: 1 1 auto;
display: flex;
}
footer {
background: yellow;
flex: 0 0 50px;
}
.left {
flex: 0 0 200px;
background: blue;
}
.content {
flex: 1 1 auto;
background: green;
}
.right {
flex: 0 0 200px;
background: pink;
}
</style>
</head>
<body>
<div class="container">
<header>头部</header>
<section>
<div class="left">左边</div>
<div class="content">中间</div>
<div class="right">右边</div>
</section>
<footer>底部</footer>
</div>
</body>
</html>
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
水平居中
行内元素水平居中
text-align: center;
1
块级元素水平居中
margin: 0 auto;
1
块级元素水平居中demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>水平居中</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background: red;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
需要注意：margin是复合属性，也就是说margin: auto;其实相当于margin: auto auto auto auto;，margin: 0 auto;相当于margin: 0 auto 0 auto;
根据规范，margin-top: auto;和margin-bottom: auto;，其计算值为0。这也就解释了为什么margin: auto; 等同于margin: 0 auto;
垂直居中
单行文字垂直居中
height: n px;
line-height: n px;
1
2
2
文本相对图片、输入框垂直居中
vertical-align: middle;
1
块级元素垂直居中
position: absolute;
top: 50%;
margin-top: -50%; /* 元素高度的一半*/
1
2
3
2
3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background: red;
position: absolute;
top: 50%;
margin-top: -100px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
文本水平垂直居中
text-align + line-height实现单行文本水平垂直居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style type="text/css">
.box{
line-height: 200px;
width: 200px;
height: 200px;
background-color: red;
color: #fff;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
我要垂直居中
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
水平垂直居中
绝对定位(absolute)
方法一：利用绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin:auto。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style type="text/css">
.wrap{
position: relative;
width: 200px;
height: 200px;
background-color: red;
}
.inner{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100px;
height: 100px;
background-color: blue;
margin: auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner"></div>
</div>
</body>
</html>
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
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
方法二：在子元素宽高已知的情况下，可以配合margin负值达到水平垂直居中效果。使用绝对定位将content的定点定位到body的中心，然后使用负margin（content宽高的一半），将content的中心拉回到body的中心，达到水平垂直居中的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>css实现水平垂直居中</title>
<style type="text/css">
.box{
width:200px;
height:200px;
background: red;
position: absolute;
top: 50%;
left: 50%;
margin-left:-100px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
方法三：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>垂直居中布局</title>
<style type="text/css">
html,body{
width: 100%;height: 100%;margin: 0;padding: 0;
}
#box {
width: 300px;
height: 300px;
background: red;
margin: 0 auto; /*水平居中*/
position: relative;/*相对自己当前进行定位*/
top: 50%;
margin-top: -150px;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
CSS3实现垂直水平居中
利用绝对定位元素的偏移属性和CSS3的translate(translate函数的动画是利用GPU，能够减少浏览器重绘)来实现的自身偏移达到水平垂直居中的效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3实现垂直水平居中</title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background: red;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%); /* 这里我们使用css3的transform来达到类似效果 */
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
flex实现水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>垂直居中布局</title>
<style type="text/css">
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body{
display: flex;
align-items: center; // 垂直居中
justify-content: center; // 水平居中
}
#box{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
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
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
flex实现垂直水平居中
margin: auto--实现子元素居中
使用弹性布局(display: flex)，居中变的很简单，只需要设置margin: auto; 可以使得弹性子元素在两上轴方向上完全居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>margin垂直水平居中</title>
<style type="text/css">
.box{
width: 500px;
height: 500px;
background: #ccc;
display: flex;
}
.inner{
background: red;
width: 100px;
height: 100px;
margin: auto;
}
</style>
</head>
<body>
<div class="box">
<div class="inner"></div>
</div>
</body>
</html>
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
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
方法二
在伸缩容器上使用主轴对齐justify-content和侧轴对齐align-items
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS3 Flexbox轻松实现元素的垂直水平居中</title>
<style type="text/css">
.box{
display: flex;
width: 980px;
height: 30rem;
align-items:center;
justify-content: center;
background: #0099cc
}
h1{
font-size: 1rem;
padding: 1rem;
border: 1px dashed #FFF;
color: #FFF
}
</style>
</head>
<body>
<div class="box">
<h1>CSS3</h1>
</div>
</body>
</html>
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
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
table-cell实现元素水平垂直居中
方法一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style type="text/css">
.wrap{
display: table-cell;/*此元素会作为一个表格单元格显示*/
vertical-align: middle;
text-align: center;
background-color: red;
width: 200px;
height: 200px;
border: 1px solid yellow;
}
.inner{
display: inline-block;/*为了防止块级元素的宽度默认等于其父元素*/
background-color: blue;
color: #fff;
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">我要实现水平垂直居中</div>
</div>
</body>
</html>
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
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
方法二
若子元素是图像，可不使用table-cell，而是其父元素用行高替代高度，且字体大小设为0。子元素本身设置vertical-align:middle。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style type="text/css">
.wrap{
width: 200px;
line-height: 200px;
text-align: center;
font-size: 0;
background-color: #ccc;
}
.inner{
vertical-align: middle;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="wrap">
<img class="inner" src="12.jpg">
</div>
</body>
</html>
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
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
浮动元素水平居中
小提示：在不带float的情况下，p元素的宽度会自动调整至最大化，而在带float的情况下则正好相反，它会自动调整至最小化。 这里是在不知道父元素和子元素宽度的情况下实现子元素的水平居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>如何居中一个浮动元素</title>
<style type="text/css">
.p{
position: relative;
float: left;
left:50%;
border: 1px solid red;
}
.c{
position: relative;
float: left;
right: 50%;
}
</style>
</head>
<body>
<!-- 父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。
相对定位元素的定位是相对其正常位置。
-->
<div class="p">
<h1 class="c">居中浮动元素</h1>
</div>
</body>
</html>
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
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
**注意：**绝对定位在布局中可以很方便的解决很多问题，但是大多数时候都不去使用绝对定位，而是使用浮动等方法。而当需要 DOM 元素脱离当前文档流的时候才使用绝对定位。如： 弹层，悬浮层等。
元素宽度未知实现居中
这里父元素和子元素的宽度都不知道，并且要求子元素的宽度随着其内容的增加而增加。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style type="text/css">
.wrap{
border: 1px solid red;
}
.inner{
background-color: blue;
/*设置子元素为行内块元素*/
display: inline-block;
position: relative;
left: 50%;
transform: translate(-50%);
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner">我是一个可以改变宽度的div</div>
</div>
</body>
</html>
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
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
三栏布局(两边固定，中间自适应)双飞翼布局
面试题：实现一个左中右占满屏幕，其中左右两块固定宽200，中间自适应宽，要求先加载中间块。即考察双飞翼布局。
双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局</title>
<style>
.container>div {
float: left;
}
.center {
width: 100%;
}
.content {
background: red;
margin: 0 200px;
}
.left {
background: blue;
margin-left: -100%;
width: 200px;
}
.right {
background: yellow;
margin-left: -200px;
width: 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="center">
<div class="content">中间</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
</html>
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
36
37
38
39
40
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
36
37
38
39
40
浮动实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>浮动实现</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 300px;
background-color: red;
float: left;
}
.right{
width: 200px;
height: 300px;
background-color: blue;
float: right;
}
.middle{
margin: 0 210px;
background-color: green;
height: 300px;
}
</style>
</head>
<body>
<div class="left">左边</div>
<div class="right">右边</div>
<div class="middle">中间</div>
</body>
</html>
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
36
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
36
注意：这种实现方式要把middle这个div放到最后面。相当于先把两边的div布局好，然后中间的div嵌入进去。
优点：快捷 简单 兼容性较好 缺点：有局限性 脱离文档流 需要清除浮动等
绝对定位实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>绝对定位实现</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.left{
width: 200px;
height: 300px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
.right{
width: 200px;
height: 300px;
background-color: blue;
position: absolute;
right: 0;
top: 0;
}
.middle{
margin: 0 210px;
background-color: green;
height: 300px;
}
</style>
</head>
<body>
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
</body>
</html>
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
36
37
38
39
40
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
36
37
38
39
40
**注意：**这种方式不要求将middle这个div放在最后面，放在任意位置都可以。
负margin值实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>负margin实现</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.left,.right{
height: 300px;
width: 200px;
float: left;
}
.left{
background-color: red;
margin-left: -100%;
}
.right{
background-color: blue;
margin-left: -200px;
}
.middle{
background-color: green;
height: 300px;
float: left;
width: 100%;
}
</style>
</head>
<body>
<div class="middle">中间</div>
<div class="left">左边</div>
<div class="right">右边</div>
</body>
</html>
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
36
37
38
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
36
37
38