css 实现居中的五种方式

 

 

一 、文字居中 1 固定容器高度的单行文本垂直居中：height=line-height

　　　　         2 未知容器高度的文本垂直居中：设定padding,使上下的padding值相同即可

  　　 　         3 固定容器高度的多行文本垂直居中：让<div>模拟<table>使用vertical-algin 

　　　　　 父容器 #wrap{

　　　　　　　　　　　　　　display:table

　　　　　　　　　　　　}

　　　　　 子容器 #content{

　　　　　　　　　　　　　vertical-algin:middle;

　　　　　　　　　　　　　 display:table-cell;

　　　　　　　　　　　　}

二 、图片居中 垂直居中一张图片 vertical-align:middle;

三 、

1 html:<div id="parent">
 <div id="child">Content here</div>  </div>
 css :#parent {position: relative;} 
 #child {
 position: absolute;top: 50%;left: 50%;height: 30%;width: 50%;margin: -15% 0 0 -25%;
 }
2 html:<div id="parent">
 <div id="child">Content here</div>
 </div>
 css:#parent {padding: 5% 0;}
 #child {padding: 10% 0;}

四 、 元素高宽已知.#parent{width:600px;height:400px;position:absolute;left:50%;top:50%;margin-top:-200px;margin-left:-300px;}

 

 

五 、 元素高宽未知（使用css3的属性，会出现兼容问题）#parent{ width:600px;height:400px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)
}

转载于:https://www.cnblogs.com/bingerger/p/6546039.html