关于CSS实现水平垂直居中

行内元素：1.text-align:center    对文本，图片，按钮等行内元素进行水平居中2.line-height:行高  当只有一行文字元素时，将line-height设为行高可实现垂直居中 块元素：3.margin:0 auto  对于有宽度的块元素，设置margin:0 auto,相对于父元素水平居中 4.绝对定位与负边距实现  利用绝对定位，将元素的top和left属性都设为50%，再利用margin边距，将元素回拉它本身高宽的一半，实现垂直居中。  eg:  <divid="content">
<div id=""center-box></div>
</div>
#content{
position:relative;
}
#center-box{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}  注：margin的值根据居中块元素自身宽高决定，为其一半。此例可实现水平垂直居中 5.transform   css3中提出transform，利用transform（-50%，-50%）可在未知居中块元素高宽的情况下偏移自身的一半宽高，替代4中的margin属性eg: <div id="content">
<div id=""center-box></div>
</div>

#content{
position:relative;
}
#center-box{
width:200px;
height:200px;
position:absolute;
top:50%;

 #content{
position:relative;
}
#center-box{
width:200px;
height:200px;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}

6.flex  利用弹性布局实现居中  将display设为弹性布局：display:flex  垂直居中：align-items:center  水平居中 :  justify-content:center