html 怎么使用css居中,用CSS实现元素居中的N种方法

网页布局中，元素水平居中比垂直居中简单不少，同时实现水平垂直居中也不难，难的是想出多种实现水平垂直居中的方法并从中挑选最合适最容易理解的那一个完成我们的项目。

现在是响应式设计的时代，大多数情况下我们并不知道用户浏览器尺寸，也没有办法计算元素准确的宽高等，所以将宽高等属性值固定为某个具体的px不可行。

以下是实现元素居中的几种实用方法：

1 . line-height大法好

单行文本垂直居中

如果一个标签没有定义height属性，那么其最终表现的告诉一定是由line-height起作用。网上大多说把line-height值设置为height一样的可实现单行文字的垂直居中。这句话确实是正确的，但这个height是多余的。

示例代码：为了方便大家看，我给body加了一个边框。

body{

border: 10px solid black;

}

p {

line-height: 50px;

background: red;

}

单行文本垂直居中

效果图1-1

多行文本垂直居中

(1)对于高度不固定的文本，设置文本垂直居中直接使用padding就行。

效果图1-2-1

(2)对于高度固定的文本，里面的文字单行或多行显示，字体有大有小，要怎么实现垂直居中呢？

p {

line-height: 400px;

border: 10px solid black;

}

span {

background: red;

display: inline-block;

line-height: 1.4em;

vertical-align: middle;

}

i{

width: 0;

display: inline-block;

vertical-align: middle;

font-size: 0;

}

多行文本垂直居中，多行文本垂直居中，多行文本垂直居中，

多行文本垂直居中，多行文本垂直居中，多行文本垂直居中，
多行文本垂直居中，多行文本垂直居中，多行文本垂直居中，

多行文本垂直居中，多行文本垂直居中，多行文本垂直居中，多行文本垂直居中，多行文本垂直居中，多行文本垂直居中，&nbsp

效果图1-2-2

去掉i元素，得到的效果也是相同的，所以这里有一点疑惑，先mark一下，待日后弄懂了回来补充。

一张图片水平垂直居中

p {

border: 10px solid black;

line-height: 400px;

text-align: center;

}

img {

vertical-align: middle;

}


效果图1-3-1

a {

border: 10px solid black;

display: inline-block;

text-align: center;

vertical-align: middle;

}

img {

vertical-align: middle;

padding: 10px;

margin: 10px;

}


效果图3-1-2

多图水平垂直居中(题外话，与line-height无关)

html代码：






CSS代码：

p {

background: yellow;

width: 1em;

height: 1em;

padding: 0.1em;

margin: 0.1em;

font-size: 280px;

float: left;

}

img {

display: block;

width: 100%;

height: 100%;

background-repeat: no-repeat;

background-position: center;

}

效果图

2 . text-align: center; ——给行内元素的父元素设置此样式使得行内元素水平垂直居中

p {

border: 10px solid black;

text-align: center;

}

这是一段文本

效果图2

3 . 块级元素水平居中margin: 0 auto;

p {

border: 10px solid black;

}

img {

display: block;

width: 33%;

margin: 0 auto;

}


效果图3

4 . position & translate——绝对定位 & 偏移 实现水平垂直居中。

绝对定位元素的水平垂直居中

关键点：上下左右皆为0，margin为auto。

div{

border: 10px solid black;

width: 600px;

height: 400px;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

}

效果图4-1

绝对定位元素的水平垂直居中-偏移法：

关键点：left和top相对父元素，translate相对于自身。

p{

position: absolute;

background: red;

width: 200px;

height: 200px;

left: 50%;

top: 50%;

transform: translate(-50%,-50%);

}

效果图4-2

5 . display: table-cell;

关键点：需要添加额外元素作为外部容器,需要实现垂直居中的元素与其父元素都要设置vertical-align: middle;不然不能实现垂直居中。

* {

padding: 0;

margin: 0;

}

.center-aligned{

display: table;

background: #00a0ea;

width: 100%;

height: 300px;

}

.center-core{

display: table-cell;

text-align: center;

vertical-align: middle;

}

.center-core img{

width: 40%;

vertical-align: middle;

height: auto;

}


效果图6

6 . display: flex;模型实现水平垂直居中

关键点：容器获得display:flex;属性，其他所有特性定义也都在容器元素內进行。

html代码如下：

设置基础样式：

* {

padding: 0;

margin: 0;

}

#item-container {

display: flex;

background: yellow;

}

.circle {

background: black;

width: 100px;

height: 100px;

border-radius: 50%;

}

.square {

background: #cdcdcd;

width: 150px;

height: 150px;

}

效果图6-1

水平居中：

#item-container {

justify-content: center;

}

效果图6-2

两端对齐：(玩一下)

#item-container {

justify-content: space-between;

}

效果图6-3

垂直居中：

#item-container {

align-items: center;

heigh: 200px;

}

效果图6-4

7 . calc()——适合内容宽高为固定尺寸的场景

关键点：top: 50%;left: 50%只是将p的左上角移到了div的中心点，要实现两个中心点重合，需要得到p自身宽高的一半。

* {

padding: 0;

margin: 0;

}

div {

background: green;

position: relative;

min-height: 400px;

}

p {

background: red;

position: absolute;

width: 200px;

height: 200px;

top: calc(50% - 200px/2);

left: calc(50% - 200px/2);

}

效果图7

参考资料：