css字体样式垂直居中,css单行文本垂直居中

网上有很多垂直居中方法，可能大多数都用不到，下面根据项目中 最经常用到的几种 做以下总结：

1.  最经常用的 ，应该也是简单的  flex  弹性布局
    在父元素的设置:

.container{ dispaly:flex; justify-content:center; aligin-items:center; }

2. 有绝对定位的div 水平 垂直居中

.vertical-center-position{ position:absolute; width: 300px; height: 300px; top:0; bottom:0; left:0; right:0; margin:auto;}

3. 利用绝对定位和  transform

.container{ position:relative; // 父元素相对定位}.item { // 子元素 绝对定位 position:absolute; left:50%; /* 定位父级的50% */ top:50%; transform: translate(-50%,-50%); /*自己的50% */ }

4. 行内元素  垂直居中

.container{ text-align:center; height:50px; line-height:50px;}