垂直居中

通用布局方式(内敛元素和块状元素都适用)

1. 利用flex:
   核心代码:

   1 2 3 4 5

   .container{ ???display:flex; ????flex-direction:column; ????justify:center }

2. 利用transformX(-50%):
   核心代码:

   1 2 3 4 5 6 7 8 9 10 11 12

   .container{ ???????????width: 300px; ???????????height: 300px; ???????????background: red; ???????????position:relative; ???????} .child{ ???????????position: absolute; ???????????top: 50%; ???????????transform: translateY(-50%); ???????????-webkit-transform: translateY(-50%); }

内敛元素的垂直居中

单行内敛元素:设置内敛元素的高度和行高相等
核心代码:

1
2
3
4

.container {
 ???height: 120px;
 ???line-height: 120px;
}

块状元素

1. 固定元素高度的块状元素
   核心代码

   1 2 3 4 5 6 7 8 9

   .container{ ???position: relative; } .child{ ???position: absolute; ?????top: 50%; ?????height: 100px; ?????margin-top: -50px; }

2. 未知高度的块状元素
   当垂直居中的元素的高度和宽度未知时，我们可以借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。
   核心代码:

   1 2 3 4 5 6 7 8

   .container { ???position: relative; } .child { ???position: absolute; ???top: 50%; ???transform: translateY(-50%); }

水平居中

通用布局方式

1. flex布局
   核心代码：

   1 2 3 4

   .container{ display: flex; ? ?????????????justify-content: center; }

2. absoulte+transform
   核心代码:

   1 2 3 4 5 6 7 8

   .container{ position:relative; } .child{ ?position: absolute; ???????????????left: 50%; ???????????????transform: translateX(-50%); }

内敛元素水平居中

1. text-align:center
   核心代码:

   1 2 3

   .container{ text-align:center }

块状元素水平居中

1. 使用 margin:0 auto 必须注明子元素和父元素的宽度
   核心代码:

   1 2 3

   .container{ margin:0 auto }

2. 多块状元素：
   利用内敛元素布局方式container属性为text-align:center;
   核心代码:

   1 2 3 4 5 6

   .container{ text-align: center; } .child{ display: inline-block; }

水平垂直居中

固定宽高元素水平垂直居中

通过margin平移元素整体宽度的一半，使元素水平垂直居中。
核心代码:

1
2
3
4
5
6
7
8
9
10
11
12

.container {
 ???position: relative;
}
.child {
 ???width: 300px;
 ???height: 100px;
 ???padding: 20px;
 ???position: absolute;
 ???top: 50%;
 ???left: 50%;
 ???margin: -70px 0 0 -170px;
}

未知宽高元素水平垂直居中

1. 利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。
   核心代码：

   1 2 3 4 5 6 7 8 9

   .parent { ???position: relative; } .child { ???position: absolute; ???top: 50%; ???left: 50%; ???transform: translate(-50%, -50%); }

2. 利用flex布局
   利用flex布局，其中justify-content 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式；而align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。
   核心代码：

   1 2 3 4 5

   .container { ???display: flex; ???justify-content: center; ???align-items: center; }

相对于 body 的水平垂直居中

1. 列表布局(兼容性好)
   核心代码:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   .outer { ???display: table; ???position: absolute; ???height: 100%; ???width: 100%; } .middle { ???display: table-cell; ???vertical-align: middle; } .inner { ???margin-left: auto; ???margin-right: auto; ???width: 400px; }

2. position 布局
   核心代码

   1 2 3 4 5 6 7 8

   .container{ position: absolute; margin: auto; left: 0; top: 0; right: 0; bottom: 0; }