水平居中以及垂直居中方法积累

  • A+
所属分类:Web前端

水平居中以及垂直居中方法积累

水平居中

已知宽度块元素宽度 :

.child{width:1000px;margin:0 auto;}

文本内容居中:

.parent{text-align:center;}

通过表格:

.child{display:table;margin:0 auto;}

已知宽度,通过设置position:absolute,margin-left为宽度的负一半

.parent{position:relative;}
.child{position:absolute;left:50%;width:150px;margin-left:-75px;}

未知宽度,通过设置position:absolute

.parent{position:relative;}
.child{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);}

使用flex布局实现(兼容性不好,感觉有点变成浮动的效果,不在文档流)

第一种:.parent{display:flex;justify-content:center;}
第二种:.parent{display:flex;}.child{margin:0 auto;} 

垂直居中

文本垂直居中

.child{height:20px;line-height:20px}

未知高度,设置position:absolute

 .parent{position:relative;}
 .child{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}

已知高度,设置position:absolute,margin-top为高度的负一半

.parent{position:relative;}
.child{position:absolute;top:50%;height:150px;margin-top:-75px;}

使用flex布局实现

 .parent{display:flex;align-items:center;} 
钰玺

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: