水平、垂直居中问题总结

• 水平居中

• 行内元素：

  .parent{text-align:center}

2. 块状元素：

（1）

 .parent{text-align:center}.child｛display:inline-block;｝

(2)

 .child{
			width:200px;//块状元素需定宽
 margin: 0 auto;
                  }

（3）

 .parent{position:relative;}
 .child{position:absolute;left:50%;transform:translateX(-50%);//css3特性，需添加浏览器前缀}

//思路是子元素相对父元素向右移动父元素的50%，然后再向左移动子元素本身宽度的50%，达到水平居中的效果

（4）使用flex布局

.parent{display:flex;justify-content:center;}

• 垂直居中

1. 单行内联元素：height和line-height取值相等
2. 块状元素：

(1)flex布局

 .parent{
 display:flex;
 height:100px;//高度固定
 align-item:center;}

（2）table布局

 .child{    display: table-cell;
    vertical-align: middle;}

(3)已知元素高度：absolute+ 负margin

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

(4)css3 transfrom特性

 .parent{position:relative;}
 .child{position:absolute;top:50%;transform:translateY(-50%);//css3特性，需添加浏览器前缀}

//思路是子元素相对父元素向下移动父元素的50%，然后再向上移动子元素本身宽度的50%，达到垂直居中的效果

• 水平垂直居中

（1）flex布局

 .parent{display:flex;justify-content:center;align-item:center;}

(2)css3特性transform

 .parent{positon:relative}
 .child{    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);}

(3)已知元素高度：absolute+ 负margin

.parent{position:relative}
 .child{position:absolute;top:50%;left:50%;height:100px;margin:-50px 0 0 -50px;}

• [ 可能总结的不是特别完整，后续继续完善！]