css元素的居中的方式有哪些

一、让一个元素在父元素里面实现左右上下居中，应用“标尺”
分析：
1、如果子元素是行内块元素，即display:inline-block;则给父元素添加text-align:center;可实现子元素在父元素里面左右居中
2、vertical-align属性(垂直对齐方式)仅支持inline-block。vertical-align属性对齐按照顶线、中线、基线、底线
3、添加“标尺”确定子元素和父元素的中线
4、让子元素和父元素的中线对齐即可实现上下居中
实现：
1、左右居中
a：给父元素加text-align:center;
b:保证子元素为行内块元素（inline-block）
2、上下居中
a、在子元素后面添加标尺：span，且不能回车（回车会产生偏差）
b、保证span标签为行内块元素，添加属性display：inline-block；
c、确定子元素和span中线，分别添加属性vertical-align：middle；
d、给span设置宽度为0，高度百分百
注：这种方法不常用
二、利用“定位”
定位是一种改变元素位置的属性
属性：position
常用属性值：
relative(相对定位):默认以自身为参照物，占据空间，不会破坏文档流
absolute(绝对定位)：参照已定位的父元素进行位置变化；当没有父元素或父元素没有定位时，以整个文档为参照；不占空间，脱离文档流
步骤：a、给父元素添加定位position属性设置position:relative;(形成参照物)
b、给子元素设置position:absolute;（不占空间）
left:0;right:0;top:0;bottom:0;
margin:auto;