css样式⾼居中,CSS居中的⼏种⽅式
本⽂主要总结⼏种常见的CSS居中⽅式，下⾯我准备分为三个⽅向来写，分别是⽔平居中，垂直居中，⽔平垂直居中。
⽔平居中
css设置文字垂直居中1、inline元素如何实现⽔平居中？(text-align:center)
2、为什么text-align对block元素⽔平居中⽆效？(text-align只对⾏内元素⽣效)
3、block元素实现⽔平居中？(margin:0 auto)
垂直居中
1、inline元素垂直居中、block元素垂直居中，两者的实现需要区别对待吗？(yes)
2、inline元素如何实现垂直居中？(height = line-height，多与text-align:center结合后应⽤于导航栏)
⽔平垂直居中
1、如果是多⾏⽂字怎么实现⽔平垂直居中？    效果预览
.parent{
border:1px solid pink;
height:300px;
line-height:300px;
text-align:center; /*⽔平居中*/
}
.child{
border:1px solid yellow;
width:200px;
display:inline-block;
vertical-align:middle;
word-break:break-all;
line-height:2;
}
2、block元素的⽔平垂直居中
(1)既然margin:0 auto可以让块级元素⽔平居中，那为什么margin:auto 0不可以让块级元素垂直居中呢？
width 相关计算依赖于其包含块，最初能确定值，所以margin:keywords auto中auto会均分包含块的剩余空间。⽽height 相关计算依赖于其⾃⾝内容⾼度，⾃⾝内容⾼度是不能最初确定值的，所以margin:auto keywords⽆法让块级元素垂直居中。
(2)已知⽗容器⾼度，利⽤table⾃带功能使内容垂直居中【想实现⽔平垂直居中的效果，可以给内容加个div，再设置margin:0 auto】
效果预览
.parent{
border:1px solid pink;
height:300px;
}
.child{
border:1px solid yellow;
}
利⽤table⾃带功能使内容垂直居中利⽤table⾃带功能使内容垂直居中利⽤table⾃带功能使内容垂直居中利⽤table⾃带功能使内容垂直居中利⽤table⾃带功能使内容垂直居中
(3)已知⽗容器宽⾼，将div装成table，利⽤margin:0 auto、display:table-cell属性实现⽔平垂直居中    效果预览
table⾃带功能与将div装成table实现⽔平垂直居中作对⽐    效果预览
.parent{
border:1px solid pink;
width:400px;
height:300px;
display:table-cell;
vertical-align:middle;/*之所以⼦元素可以垂直居中对齐，是因为td元素具有valign属性，⽽vertical-align:middle只会在具有valign属性的对象中⽣效*/
}
.child{
border:1px solid yellow;
width:200px;
margin:0 auto;
}
提问：doctype对浏览器解析vertical-align的影响？
答案
3、已知宽⾼，利⽤负边距实现⽔平垂直居中    效果预览
position:absolute;
width:300px;
height:100px;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-150px;
4、未知宽⾼，利⽤css3的新属性transform:translate(x,y)属性实现⽔平垂直居中    效果预览
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
5、已知宽⾼，利⽤absolute、margin:auto实现⽔平垂直居中    效果预览position:absolute;
width:300px;
height:200px;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
6、已知宽度，在⽗容器内利⽤flex属性实现⽔平垂直居中(不兼容IE)
效果预览
display:flex;
justify-content:center; /*⽔平居中*/
align-items:center; /*垂直居中*/
flex-direction:column; /*⼦元素⾮⽔平排列⽽是垂直排列*/
7、利⽤100%⾼度的after、before加上inline-block实现⽔平垂直居中
效果预览
.parent{
border:1px solid pink;
height:300px;
text-align:center; /*⽔平居中*/
}
.child{
border:1px solid #ccc;
width:300px;
height:150px;
display:inline-block; /*块级元素具有⾏内元素的属性，⽀持元素从左到右排列*/ vertical-align:middle; /*⼦元素垂直居中*/
}
.parent .before{
border:1px solid yellow;
height:100%;
display:inline-block; /*⾏内元素具备块级元素的特征，⽀持设置宽⾼*/
vertical-align:middle;
}
.parent .after{
border:1px solid orange;
height:100%;
display:inline-block;
vertical-align:middle; /*⼦元素垂直居中的参照物*/
}
8、利⽤100%⾼度的after、before加上inline-block实现⽔平垂直居中(优化版)效果预览
.parent{
border:1px solid pink;
height:300px;
text-align:center; /*⽔平居中*/
}
.child{
border:1px solid #ccc;
width:300px;
display:inline-block;
vertical-align:middle;
}
.parent:before{
content:'';
outline:1px solid transparent; /*元素透明*/
display:inline-block;
height:100%;
vertical-align:middle;
}
.parent:after{
content:'';

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