center

发表于

创新理论与方法 　>　国际教育　> 　特殊儿童教育　>　儿童发展　>　因子分析　>　教师职业道德　>　数学与生活

水平居中

１、内联元素水平居中

方式

利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对行内元素(inline), 行内块(inline-block), 行内表(inline-table), inline-flex元素水平居中都有效。
常用的行内元素有a、abbr、b、br、em、input、label、select、span、strong、sub、sup、textarea等。

核心代码

1
2
3
.center-text {    
        text-align: center;
 }

演示程序

演示代码

２、宽度固定的块级元素水平居中

方法

宽度固定的块级元素水平居中，设置该元素的margin: 0 auto。
常用的块级元素有address、article、audio、blockquote、canvas、div、footer、form、h1、header、hr、ol、output、p、pre、section、table、ul、video等。

核心代码

1
2
3
.center-block {  
        margin: 0 auto;
}

演示程序

演示代码

３、多块级元素水平居中

方法

利用inline-block。如果一行中有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。

核心代码

1
2
3
4
5
6
.container {    
        text-align: center;
}
.inline-block {    
        display: inline-block;
}

演示程序

演示代码

４、利用display: flex

方法

利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式，本例中设置子元素水平居中显示。

核心代码

1
2
3
4
.flex-center {    
        display: flex;    
        justify-content: center;
}

演示程序

演示代码

垂直居中

１、单行行内元素垂直居中

方法

单行内联(inline-)元素垂直居中
通过设置内联元素的高度(height)和行高(line-height)相等，从而使元素垂直居中。

核心代码

1
2
3
4
v-box {    
	height: 120px;    
	line-height: 120px;
}

演示程序

演示代码

２、多行元素垂直居中

方法

利用表布局（table）
利用表布局的vertical-align: middle可以实现子元素的垂直居中。

核心代码

1
2
3
4
5
6
7
.center-table {    
	display: table;
}
.v-cell {    
	display: table-cell;    
	vertical-align: middle;
}

演示程序

演示代码

３、利用flex布局（flex）

方法

利用flex布局实现垂直居中，其中flex-direction: column定义主轴方向为纵向。因为flex布局是CSS3中定义，在较老的浏览器存在兼容性问题。

核心代码

1
2
3
4
5
.center-flex {    
	display: flex;    
	flex-direction: column;    
	justify-content: center;
}

演示程序：

演示代码

４、通过100%高度的span进行垂直居中

方法

利用vertical-align所需的条件完成垂直居中

核心代码：

1
2
3
4
5
6
7
8
img {
	vertical-align: middle;
}
span {
	display:inline-block;
	height: 100%;
	vertical-align: middle; 
}

演示程序：

演示代码

实现原理


注意我用红色标注画出的地方，垂直居中是需要一个行内元素的基线来作为标准的。span元素出现意义就是在于利用display:inline-block和height:100%这俩属性完成行内与基线这俩个大前提要求。

  • display:inline-block达到了vertical-align的相对所在行的要求
  • height:100%达到了所在行的基线(即div.box高度的一半)的要求
    所以垂直居中(把此元素放置在父元素的内容/字体的中部)

５、利用“精灵元素”

方法

利用“精灵元素”(ghost element)技术实现垂直居中，即在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。

核心代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.ghost-center {
    border: 2px solid black;
    height: 200px;
    width: 300px;
}
.ghost-center::before {
    content: " ";
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
.ghost-center p {
    display: inline-block;
    vertical-align: middle;
    width: 120px;
}

演示程序：

演示代码

实现原理

这种方式和第二种类似，只是用after伪类生成的元素代替了span元素而已。
首先要显示伪类，所以display:inline-block，
然后为为元素加入空内容，以便伪元素中不会有内容显示在页面中，所以content: ""
其次，为了达到和span元素相同的效果，将伪元素高度设为100%，宽度设为0

６、固定高度的块级元素垂直居中

方法

我们知道居中元素的高度和宽度，垂直居中问题就很简单。通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了。

核心代码：

1
2
3
4
5
6
7
8
9
.parent {  
	position: relative;
}
.child {  
	position: absolute; 
	top: 50%;  
	height: 100px;  
	margin-top: -50px; 
}

演示程序：

演示代码

７、未知高度的块级元素

方法

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

核心代码：

1
2
3
4
5
6
7
8
.parent {    
	position: relative;
}
.child {    
	position: absolute;    
	top: 50%;    
	transform: translateY(-50%);
}

演示程序：

演示代码

水平垂直居中

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

方法

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

核心代码：

1
2
3
4
5
6
7
8
9
10
11
12
.parent {    
	position: relative;
}
.child {    
	width: 300px;    
	height: 100px;    
	padding: 20px;    
	position: absolute;    
	top: 50%;    
	left: 50%;    
	margin: -70px 0 0 -170px;
}

演示程序：

演示代码

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

方法

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

核心代码：

1
2
3
4
5
6
7
8
9
.parent {    
	position: relative;
}
.child {    
	position: absolute;    
	top: 50%;    
	left: 50%;    
	transform: translate(-50%, -50%);
}

演示程序：

演示代码

利用flex布局

方法

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

###核心代码：

1
2
3
4
5
.parent {    
	display: flex;    
	justify-content: center;    
	align-items: center;
}

演示程序：

演示代码

利用grid布局

方法

利用grid实现水平垂直居中，兼容性较差，不推荐。

核心代码：

1
2
3
4
5
6
7
.parent {  
	height: 140px;  
	display: grid;
}
.child { 
 	margin: auto;
}

演示程序：

演示代码

屏幕上水平垂直居中

方法

屏幕上水平垂直居中十分常用，常规的登录及注册页面都需要用到。要保证较好的兼容性，还需要用到表布局。

核心代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.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;
}

演示程序

演示代码

文中所述方案只是居中方案其中的一部分，并不是全部。另代码中涉及CSS3的flex，transform，grid等内容都存在兼容性问题。

主角最后登场－－－万能的居中方式

方法

绝对定位 + transform

演示程序

演示代码

参考文章

【基础】这15种CSS居中的方式，你都用过哪几种？
CSS居中的方法总结
css水平垂直元素居中全指南
CSS居中
CSS：使用伪元素做水平垂直居中的微深入研究
CSS居中
Css实现元素的垂直居中
css实现垂直居中的方法总结（很详细滴
用 CSS 实现元素垂直居中