CSS技巧-水平垂直居中

最基本的两个嵌套块级元素，父元素parent和子元素child

<div class="parent">  <div class="child"></div></div>

1. 定位实现

   1.1  子元素设置 绝对定位+负margin
   

.parent{
	position: relative;
}
.chile{
	position: absolute;
	top:50%;
	left:50%;
	margin-left:-50px;  /* 子元素宽度的一半 */
	margin-top:-50px; /* 子元素高度的一半 */
}

1.2  子元素设置 绝对定位+ margin：auto
      提示：margin优先级比position高

.parent {
	position: relative;
}
.child{
	 position: absolute;
	 top: 0;
	 left: 0;
	 right: 0;
	 bottom: 0;
	 margin: auto;
}

1.3 子元素设置 绝对定位+calc

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
}

1.4 绝对定位+ transform

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

2、利用内联元素text-align和vertical-align属性

text-align 属性规定元素中的文本的水平对齐方式。
vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

2.1 text-align \ line-height+ inline-block \ vertical-align

.parent {    
	text-align: center;    
	line-height: 300px; /* 等于 parent 的 height */
}
.child {   
	display: inline-block;   
	vertical-align: middle;   
	line-height: initial; /* 这样 child 内的文字就不会超出跑到下面 */
}

 2.2 table-cell + inline-block

.parent {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child {
   display: inline-block;
}

3、布局

3.1 flex

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

3.2 grid

 .parent {
    display: grid;
}
.child {
   align-self: center;
   justify-self: center;
}