css 如何使文字垂直居中

Question

一行文字时垂直居中，两行时也垂直居中？css该怎默写？

Answer 1

单行文本，只需要将文本行高(line-height)和所在区域高度(height)设为一致即可：

<!--html代码-->
    <div id="div1">
        这是单行文本垂直居中
    </div>

/*css代码*/
#div1{
    width: 300px;
    height: 100px;
    margin: 50px auto;
    border: 1px solid red;
    line-height: 100px; /*设置line-height与父级元素的height相等*/
    text-align: center; /*设置文本水平居中*/
    overflow: hidden; /*防止内容超出容器或者产生自动换行*/
}

多行文本垂直居中分为两种情况，一个是父级元素高度不固定，随着内容变化；另一个是父级元素高度固定。
父级高度不固定的时，高度只能通过内部文本来撑开。这样，我们可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：

<!--html代码-->
    <div id="div1">
            这是多行文本垂直居中，
            这是多行文本垂直居中，
            这是多行文本垂直居中，
            这是多行文本垂直居中。
    </div>

/*css代码*/
#div1{
    width: 300px;
    margin: 50px auto;
    border: 1px solid red;
    text-align: center; /*设置文本水平居中*/
    padding: 50px 20px;
}

父级高度固定的时，设置父级div的display属性：display: table;；然后再添加一个div包含文本内容，设置其display:table-cell;和vertical-align:middle

<!--html代码-->
    <div id="outer">
        <div id="middle">
            这是固定高度多行文本垂直居中，
            这是固定高度多行文本垂直居中，
            这是固定高度多行文本垂直居中，
            这是固定高度多行文本垂直居中。
        </div>
    </div>

/*css代码*/
       #outer{
            width: 400px;
            height: 200px;
            margin: 50px auto;
            border: 1px solid red;
            display: table;
        }
       #middle{ 
            display:table-cell; 
            vertical-align:middle;  
            text-align: center; /*设置文本水平居中*/  
            width:100%;   
        }

Answer 2

flex的垂直居中，这种做法可以不定义内部元素的高度
css:

.mod{
    display: flex;
    align-items: center;/*垂直居中*/
    height:300px;
}
.inner{
}

html:

<div class="mod">
    <div class="inner">
        居中
    </div>
</div>

效果如下：

相关链接：前端九阴真经 CSS篇 - 弹性布局flex

Answer 3

<div class="parent">
    <div class="child>demo1</div>
</div>

1、使用table-cell+vertical-align

.parent {
    display:table-cell;
    vertical-align:middle;
}

2、使用absolute+transform

.parent {
    position:relative;
}
.child {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
}

3、使用flex+align-items

.parent {
    position:flex;
    align-items:center;
}

Answer 4

//html
<div>
  <p>n行文字n行文字n行</p>
</div>


//css
div{
  height:100px;
  display:-webkit-box;
  -webkit-box-align:center;/* 垂直居中 */
  -webkit-box-pack:center;/* 水平居中 */
  background:#eee;
}

Answer 5

https://css-tricks.com/center...
足够你用了

Answer 6

第一种:加上line-height和vertical-align:middle;line-height和height的值要一样;
第二种:给元素设置一个字的宽度,再调一下边距,字体会自动往下排列;
第三种:给每个字后面加一个,当然这并不推荐

Answer 7

vertical-align:middle

Answer 8

两个方法

一、align-self / align-items

IE11 以下版本不支持。搜一下用法有案例，不写了。

二、table-cell

  display:table-cell;
  vertical-align:middle;

Answer 9

flex的垂直居中，没有人来答一发么？

Answer 10

推荐你看这篇文章
对css居中的一点总结