子元素文字上下左右居中设置

• demo

<template>
    <header class="head">
        <span id="login">登陆</span>
        <span id="register">注册</span>
    </header>
</template>
<style>
    .head {
        height: 50px;
        line-height: 50px;
        background: green;
        font-size: 20px;
        text-align: center;
        width: 100%;
        // vertical-align: middle;
    }
</style>

要点

1.只需要处理父级元素即可
设置 height = line-height
vertical-align:middle

水平居中设置

1、行内元素
设置 text-align:center
2、定宽块状元素
设置 左右 margin 值为 auto

• 以下方式页可以垂直剧中，但是不知道怎么左右剧中

<template>
    <header class="head">
        <span id="login">登陆</span>
        <span id="register">注册</span>
    </header>
</template>

<script>

</script>

<style>
    .head {
        height: 50px;
        line-height: 50px;
        background: green;
        font-size: 20px;
        text-align: center;
        display:flex;/*Flex布局*/
        align-items:center;/*指定垂直居中*/
    }
    #login {
        margin: auto;
    }
    #register{
        margin: auto;
    }
</style>