div垂直居中-CSS元素垂直居中方法的探究

div垂直居中-CSS元素垂直居中方法的探究

1.文本垂直居中（）
**单行文本：
方法一 line-height=height

方法二：

自带16pxmargin，所以p{ margin:0} 才能使用方法一

多行文本：
方法一：父级元素{display:table} 子元素p{display:table-cell;vertical-align:middle;} 必须具备单元格的特性有display:table-cell，vertical才能生效；想要水平居中，加个text-align:center;
方法二：在父级元素里面写两个元素。一个部分用来承载文本，另外一个里面什么都不写，用来站位如
p{display:inline-block; vertical-align:middle} span{display:inline-block;height:100%;vertical-align:middle}
必须同时为inline-block；还想要水平居中：在父级元素中加text-align:center;**

2. 块级元素：
方法一：父级元素：position：relative 子元素：position：absolute;top:50%;left:50%; margin:-高的一半 0 0 -宽度的一半；
方法二：父级元素： padding: 父元素-子元素的一半;box-sizing:border-box;
方法三： 父级元素：position：relative 子元素：position：absolute; top left right bottom:0; maigin:auto;
方法四：在父级元素里面写两个元素。一个部分用来承载元素，另外一个里面什么都不写，用来站位<class=“floater”>
.floater{float:left;width:100%;height:50%;maigin-bottom:-子元素高度的一半} .子元素{clear:both;maigin:0 auto（水平居中）}
方法五：弹性盒子 （在移动端中常用；pc端中涉及兼容性的问题）：父元素：{display:flex;justify-content:center;align-items:center;}
图片居中：line-height:=height;text-align:center
.img{vertical-align：center}

如果有什么问题，请多多指教！！