设置了text-align: center; 为什么还是没居中，一定要与vertical-align都设置吗？

Question

Answer 1

单行文本的垂直居中可以采用高度和行高相等的写法：

height: 30px;
line-height: 30px;

或者直接的文本垂直居中方案：
verticle-align: middle;
或者绝对布局和相对布局的方案：

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

或者 flex 布局：

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

Answer 2

居中了呀

text-align: center是设置水平居中
设置垂直居中一般用line-height
你这里可以加上一行line-height: 50px;

Answer 3

如果你是想让文字垂直和水平都居中：
对于只有一行的文字可以设置line-height等于height。
如果你是想让红色容器在页面水平居中：
给红色容器和红色容器外部的容器设置宽度，然后设置margin：0 auto；

更多方法已经有大神总结了https://segmentfault.com/a/11...

Answer 4

text-center是用于水平居中

可以使用padding，设置上边距跟下边距的一样的距离实现垂直居中
也可以使用line-height，单位跟你高度设置的一样

Answer 5

做这种居中呢，应该没有比flex更好的了；比如你这应该这样做：

.second_background{
    width:100px;
    height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
}

Answer 6

text-align只是设置水平居中。。。。。。

你可以设置line-height等于height，文本就垂直居中了

Answer 7

text-align: center 作用于相对块里面的行元素，该块元素本身不受影响。

对于该块元素可以使用 margin: 0 auto; 居中。

Answer 8

text-align：这个属性用于实现水平居中
如果你想要设置垂直居中的话，就要使用line-height属性，设置与height相同的值：height：50px;line-height:50px;
vertical-align：middle;在想要设置图片垂直居中时，可以使用

Answer 9

你可以试下让line-height=height