marktext 文字居中_让文本垂直居中的几个方法

一、使用line-height(适用于知道高度，一行文字)

让line-height和height一样高，可使文本垂直居中。

二、设置上下padding

三、通过table

.testdiv {

height: 87px;

display: table;

}

.innerdiv {

width: 20px;

height: 100%;

line-height: 20px;

padding: 0 4px;

border-right: 1px solid #F4F8FB;

font-size: 14px;

text-align: center;

background: #F4F8FB;

display: table-cell;

vertical-align: middle;

}

服装

三、使用 vertical-align和空标签(可用于高度未知)

.testdiv {

height: 87px;

}

h4 {

width: 20px;

height: 100%;

float: left;

line-height: 20px;

padding: 0 4px;

border-right: 1px solid #F4F8FB;

font-size: 14px;

text-align: center;

background: #F4F8FB;

}

h4 a {

display: inline-block;

vertical-align: middle;

color: #1A397C;

}

h4 i {

height: 100%;

width: 0;

display: inline-block;

vertical-align: middle;

color: #1A397C;

}

服装

四、absolute+margin-top方法(需知道内部div高度)

.testdiv {

height: 87px;

position: relative;

background: #F4F8FB;

}

.innerdiv {

width: 20px;

height: 40px;

line-height: 20px;

padding: 0 4px;

border: 1px solid #000;

font-size: 14px;

text-align: center;

position: absolute;

top: 50%;

margin-top: -21px;

}

居中

五、absolute+transform方法(可适用于内部div高度未定的情况，因为translate属性值为百分比时是相对元素自身的content+padding+border来计算的)

.testdiv {

height: 87px;

position: relative;

background: #F4F8FB;

}

.innerdiv {

width: 20px;

line-height: 20px;

padding: 0 4px;

border: 1px solid #000;

font-size: 14px;

text-align: center;

position: absolute;

top: 50%;

transform: translateY(-50%);

}

居中

六、使用flex布局

.testdiv {

height: 87px;

background: #F4F8FB;

justify-content: center; /*子元素水平居中*/

align-items: center; /*子元素垂直居中*/

display: -webkit-flex;

}

.innerdiv {

width: 20px;

line-height: 20px;

padding: 4px;

border: 1px solid #000;

font-size: 14px;

text-align: center;

}

居中

七、aboslute(原理：‘top’ + ‘margin-top’ + ‘border-top-width’ + ‘padding-top’ + ‘height’ + ‘padding-bottom’ + ‘border-bottom-width’ + ‘margin-bottom’ + ‘bottom’ = 包含块的高度。

在其他值不是auto的时候，margin-top和margin-bottom是可以根据上式算出的。同理margin-left和margin-right也是)

.testdiv {

height: 87px;

background: #F4F8FB;

position: relative;

}

.innerdiv {

width: 20px;/*宽度需固定*/

line-height: 20px;

padding: 4px;

border: 1px solid #000;

font-size: 14px;

text-align: center;

height: 40px;/*高度需固定*/

margin: auto;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

}

居中