css如何文字纵轴横轴都居中,css中元素垂直居中的n种方法

元素垂直居中的n种方法

本文章收集了多种实现居中布局的方法，并且按照实现的时间线，从css2到css3的各种解决方案，从代码量有少到多的排序来一一说明每种布局方法的实现方式，通过阅读此文章能够让你解决平时的开发中遇到的各种布局问题。

使用line-height实现单行文本垂直居中

line-height：用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒(line boxes)的最小高度。对于非替代的 inline 元素，它用于计算行盒(line box)的高度。

.box-1{

height: 50px;

line-height: 50px;

}

这是要垂直居中的内容。

使用inline-block元素和vertical-align特性实现垂直居中

此方法不限制元素的宽高，兼容性好

vertical-align：用来指定行内元素(inline)或表格单元格(table-cell)元素的垂直对齐方式。

这是要垂直居中的内容。

.box{

text-align: center;

letter-spacing: -.3em;

}

.box::before{

content: ‘‘;

height: 100%;

width: 1px;

margin-right: -1px;

display:inline-block;

vertical-align: middle;

}

.content{

display:inline-block;

vertical-align: middle;

letter-spacing: normal;

}

上面的案例通过利用display:inline-block的高度100%于父级高度，再利用vertical-aling:middle垂直居中属性，让行内块级元素剧中与父级。在元素设置成行内块级元素的时候代码中如果元素后边有空格，可以通过设置父级元素letter-spacing:-.3em，然后在通过居中元素还原文字间隔，或者通过设置父级的font-size:0;也可以取消空格的间距。其中红色竖线是通过父元素的伪类设置的。

使用表格单元格和vertical-align特性实现垂直居中

这是要垂直居中的内容。

.box{

display: table-cell;

vertical-align: middle;

text-align:center;

}

.content{

display:inline-block;

}

此方法需要设置父级的父级为diaplay:table;，并且设置父元素：display:table-cell，然后在设置vertical-align:middle，实现元素居中，但是此方法子元素需要是行内元素，和行内块级元素;

使用绝对定位absolute和margin负值

此方法用于固定宽高的元素，或者通过js获取不固定元素宽高

这是要垂直居中的内容。

.box{

position: relative;

}

.content{

position: absolute;

width: 100px;

height: 100px;

left: 50%;

top: 50%;

margin: -50px 0 0 -50px;

}

此方法需要设置元素依照父级绝对定位，left和top都按照父元素50%定位。且需要知道要居中元素的宽高，也可以通过javascript获取元素的宽高，并且设置margin的上和左为负值元素宽高的一半；

使用绝对定位absolute和margin:auto

此方法需要设置居中元素为固定宽高

这是要垂直居中的内容。

.box{

position: relative;

}

.content{

position: absolute;

width: 100px;

height: 100px;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: auto;

}

此方法利用margin: auto;居中特性加决定定位上下左右为0来实现元素居中，此方法需要固定元素的宽高，并且决对定位于父元素。兼容ie8以上浏览器.

使用绝对定位absolute和css3的transform:translate属性

这是要垂直居中的内容。

.box{

position: relative;

}

.content{

position: absolute;

left: 50%;

top: 50%;

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

}

此方法利用了css3的新特性元素偏移属性，先让元素绝对定位于父元素的右、上的50%，然后通过transform:translate(-50%, -50%);设置元素按照自身的右上便宜50%实现居中，此方法不用的优点：不用固定元素宽高，缺点：兼容需要支持css3的浏览器。

使用flex实现居中

通过flex弹性布局有好多种方式可以居中对齐，可以给父级单独设置，或者父级子级结合设置实现

html代码结构完全一样：

这是要垂直居中的内容。

方法1：

.box{

display: flex;

justify-content: center;

align-items: center;

}

最简单的方法，只通过父级设置，把父元素设置成弹性很模型，然后设置父元素的子元素横向纵向居中显示。

方法2：

.box{

display: flex;

justify-content: center;

align-content: center;

flex-wrap: wrap;

}

也是只通过父级设置，把父元素设置成弹性很模型，然后设置父元素的子元素横向居中显示，然后通过弹性很模型的子元素组align-content:center对齐方式，配合flex-wrap:wrap实现。

方法3：

.box{

display: flex;

flex-direction: column;

align-items: center;

}

.box:before{

content: ‘‘;

flex-grow: .5;

}

这个也只只给父级设置，不同的是这个需要借助父级的伪元素；先把父元素设置成弹性很模型，然后设置纵向排列，然后设置横轴左右居中，然后再借助父元素伪类，设置纵向占据父元素的.5大小，实现上下居中。

方法4：

.box{

display: flex;

}

.content{

margin: auto;

}

把父元素设置成弹性很模型，然后通过要居中的子元素设置margin:auto，元素外间距依照父级自适应外间距。

方法5：

.box{

display: flex;

justify-content: center;

}

.content{

align-self: content

}

把父元素设置成弹性很模型，然后子元素设置align-self: content。

使用grid网格布局实现居中

通过css的最新布局形式grid网格布局，也有多种方式，网格布局也可以给父级单独设置，或者父级子级结合设置实现

html代码结构完全一样：

这是要垂直居中的内容。

方法1：

.box{

display: grid;

place-content: center;

}

方法2：

.box{

display: grid;

place-items: center;

}

方法3：

.box{

display: grid;

justify-content: center;

align-content: center;

}

方法4：

.box{

display: grid;

justify-content: center;

align-items: center;

}

方法5：

.box{

display: grid;

}

.content{

margin: auto;

}

方法6：

.box{

display: grid;

justify-content: center;

}

.content{

align-self: center;

}

使用calc()计算函数实现

此方法需要固定高度

这是要垂直居中的内容。

.content{

margin: auto;

position: relative;

width: 300px;

height: 100px;

top: calc((100% - 100px)/ 2);

}

首先设置固定宽高，利用margin:auto左右居中，然后通过relative定位top通过calc()函数计算，使用父级的100% 减去元素自身高度然后除以2，也就是总高度减去元素高度计算后的一半值，如果元素设置了边线和内边距需要相应的减掉。

使用设置文字排布方向属性writing-mode实现

这是要垂直居中的内容。

.box{

writing-mode: tb-lr;

writing-mode: vertical-lr;

text-align: center;

}

.box-inner{

width: 100%;

display: inline-block;

writing-mode: lr;

writing-mode: horizontal-tb;

}

.content{

display: inline-block;

text-align: left;

}

这个方法相对来说复杂一些，需要多加一个标签，首先给最外层改变排布方向为垂直排布，然后设置垂直居中；然后在里边一层再把排布方向设置回来，并且设置为行内块级元素宽度100%；最后让居中的元素设置成行内块级元素，文字对齐设置成左对齐实现。