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垂直居
text align center中属性，让⾏内块级元素剧中与⽗级。在元素设置成⾏内块级元素的时候代码中如果元素后边有空格，可以通过设置⽗级元素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{

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。