CSS垂直居中

第一种：基于绝对定位的解决方案

用top,left移动只是将div的左上角移到父元素的正中心，视觉上并没有使div到达中心，所以要配合transform使用。当我们在translate() 变形函数中使用百分比值时，是以这个元素自身的宽度和高度为基准进行换算和移动的。

缺点：如果需要居中的元素已经在高度上超过了视口，那它的顶部会被视口裁切掉。

div {  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); }

第二种：基于视口单位的解决方案

新的长度单位：vw,vh

1vw=1%的适口宽度

1vh=1%的视口宽度

div {

width: 18em;

padding: 1em 1.5em;

margin: 50vh auto 0;

transform: translateY(-50%);

}

第三种：基于flexbox的解决方案

先给这个待居中元素的父元素设置 display:flex ，再给这个元素自身设置我们再熟悉不过的 margin: auto ：

father{ display:flex;min-height:100vh;margin:0;}

child{ margin:auto;

/*以下代码使child的文字也居中

align-items:center; justify-content:center;

*/

}

直接让某div的文字居中，使用属性

{display: flex;

align-items: center;

justify-content: center;}

ps.   min-content也是个很有用的属性 。这个关键字将解析为这个容器内部最大的不可断行元素的宽度（即最宽的单词、图片或具有固定宽度的盒元素）