逍遥兮容与_二胖
逍遥兮容与_二胖

利用display:table-cell让文字垂直居中（无论元素多少行）

html:

<div>333333div>

css:

div {
    display: table-cell;
    width: 200px;
    height: 200px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #F00;
}

说明：
通过display转化成为表格的形式，再采用垂直居中的方法得到需要的结果。
display:table-cell 此元素会作为一个表格单元格显示（类似和）
(与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了)

你可能感兴趣的:(WEB前端)