问下弹性盒内不知道高度的时候想让字体垂直居中代码要怎么写

Samding · 发表于 2019-11-23 16:17

本帖最后由 Samding 于 2019-11-23 22:35 编辑

图1是我的代码和效果，图2是想要的效果，差个垂直居中了(高宽不能写死，缩小浏览器的时候也要保持)，问下要怎么弄？

[XHTML] 纯文本查看 复制代码

<!DOCTYPE html>

[mw_shl_code=asm,false]<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{margin: 0;padding: 0;}
html,body{height: 100%;text-align: center;}
body{display: flex;flex-direction: column;}
.header{height: 100px;background: #524F5B;color: #fff;}
.main{background: #eee;flex: 1;display: flex;}
.left{width:100px;background: #00FFFF;}
.center{background: #C1C0C7;flex: 1;}
.right{width: 100px;background: #F05731;}
.footer{height: 100px;background: #524F5B;color: #fff;}
</style>
</head>
<body>
<div class="header">#header</div> 
<div class="main">
<div class="left">#left</div>
<div class="center">#center</div>
<div class="right">#right</div>
</div> 
<div class="footer">#footer</div> 
</body>

骑着蚂蚁兜风 · 发表于 2019-11-23 16:22

都写百分比啊
套栅格

handpear · 发表于 2019-11-23 16:47

align-items:center;

Ps出来的小赵 · 发表于 2019-11-23 16:57

如果是固定像素的，定义行高就好。如果不是固定的，行高单位可以试试VH

o0你最珍贵0o · 发表于 2019-11-23 19:21

本帖最后由 o0你最珍贵0o 于 2019-11-23 19:30 编辑

我太菜了，仅供参考，哪里需要居中，就放到哪里
display: flex;
justify-content: center;
align-items: center;

Samding · 发表于 2019-11-23 19:51

o0你最珍贵0o 发表于 2019-11-23 19:21
我太菜了，仅供参考，哪里需要居中，就放到哪里
display: flex;
justify-content: center;

我种情况不行呀，加在哪里都不能垂直居中，要么没效果要么乱了

o0你最珍贵0o · 发表于 2019-11-23 21:19

Samding 发表于 2019-11-23 19:51
我种情况不行呀，加在哪里都不能垂直居中，要么没效果要么乱了

[Asm] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>自适应圣杯布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            height: 100%;
        }

        body {
            display: flex;
            flex-direction: column;
        }

        .header {
            width: 100%;
            flex: 1;
            background-color: #dcdcdc;
        }

        .main {
            width: 100%;
            flex: 6;
            display: flex;
        }

        .left-container {
            flex: 1;
            background-color: #119900;
        }

        .center-container {
            flex: 2;
            background-color: #662200;
        }

        .right-container {
            flex: 1;
            background-color: #446655;
        }

        .footer {
            width: 100%;
            flex: 1;
            background-color: #002299;
        }

        .textCenter {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="header textCenter">
        <span>#header</span>
    </div>
    <div class="main">
        <div class="left-container textCenter">
            <span>#left-container</span>
        </div>
        <div class="center-container textCenter">
            <span>#center-container</span>
        </div>
        <div class="right-container textCenter">
            <span>#right-container</span>
        </div>
    </div>
    <div class="footer textCenter">
        <span>#footer</span>
    </div>
</body>

</html>

帐号		自动登录	找回密码
密码			注册[Register]

[已解决] 问下弹性盒内不知道高度的时候想让字体垂直居中代码要怎么写

免费评分