容器的高度height使用百分比时,如何设置可以使里面的文字垂直居中。

当我们给容器高度设置为百分比时,想让其中的文字垂直居中

如果设置line-height:100%;效果如下:并没有什么作用



代码:

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        *{padding:0px;margin:0px;}
        body,html{width:100%;height:100%;}
        .parent{height:80%;width:50%;margin:0 auto;}
        .son{height:10%;text-align:center;line-height:100%;border:1px solid darkslategray;}
    style>
head>
<body>
<div class="parent">
    <div class="son">垂直居中内容div>
div>
body>
html>
目前我采用的方法是父元素使用display:table;子元素使用display:table-cell;vertical-align:middle;

效果图如下:


代码:

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        *{padding:0px;margin:0px;}
        body,html{width:100%;height:100%;}
        .parent{height:80%;width:50%;margin:0 auto;}
        .son{height:10%;width:100%;text-align:center;border:1px solid darkslategray;display:table;}
        .son span{display:table-cell;vertical-align:middle;}
    style>
head>
<body>
<div class="parent">
    <div class="son"><span>垂直居中内容span>div>
div>
body>
html>

你可能感兴趣的:(html+css)