居中总结

1. 单行省略、多行省略

1. width:100px;  
   overflow: hidden; 
   text-overflow:ellipsis;  
   white-space: nowrap;
2. width:200px;  
   overflow: hidden;  
   text-overflow:ellipsis; 
   display: -webkit-box; 
   -webkit-line-clamp: 3; 
   -webkit-box-orient: vertical;

2. 图标和文字的绝对对齐

方法一 方法二

3.无浮动的图片居中

vertical-align属性是不适用于块元素的，只适用于内联元素。但是我们可以使用display属性，设置其值为table-cell，将块元素转化为单元格，然后再使用vertical-align属性。

html
css
效果

4.单选框与文字的对齐

元素相对于基线向下偏移量像素，用来修复单选框/复选框与12px文字大小不对齐的问题
<input type="checkbox"  id="one"/><label for="">男</label>
input{vertical-align:-2px;}

5.两段文字居中

如果要做两个元素绝对对齐，可以优先考虑display:table;(父级) display: table-cell;(子级)，这两个真可以算是最佳搭配，而且屡试不爽。vertical-align: middle;只在display:inline行内元素起作用。

html
css
效果

6.弹性盒子居中

父元素：display：flex;justify-content:center;align-items:center;
子元素：居中

父元素：display：flex;
子元素：margin：auto;

7.定位方式居中

父元素：position：relative
子元素：position：absolute;left：50%;top：50%;margin-left：-（元素/2）;margin-top：-（高/2）;
子元素：position：absolute;left：50%;top：50%;transform:translate(-50%,-50%)

8.利用vertical-align实现div中img垂直居中

css:
div{ height:200px;background:#eee;vertical-align:middle;}
img{ height:40px;vertical-align:middle;}
span{height:100%;display:inline-block;vertical-align:middle; }  
html:
<div>
    <span></span> 
    ![](https://img.haomeiwen.com/i3859151/18ffe916f802564f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
</div>