• css设置垂直居中方式总结


    方式1:flex布局,display:flex;align-items:center

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title></title>
        <style type="text/css">
            *{padding:0;margin:0;}
            .box{width:100px;height:100px;border:1px solid #ddd;display:flex;align-items:center;}
            .inner{width:40px;height:40px;background:red;}
        </style>
    </head>
    <body>
    <div class="box">
       <div class="inner"></div>
    </div>
    </body>
    </html>

    效果如下:

     方式2:position+margin

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title></title>
        <style type="text/css">
            *{padding:0;margin:0;}
            .box{width:100px;height:100px;border:1px solid #ddd;position:relative;}
            .inner{width:40px;height:40px;background:red;position:absolute;top:50%;margin-top:-20px;}
        </style>
    </head>
    <body>
    <div class="box">
       <div class="inner"></div>
    </div>
    </body>
    </html>

    效果图:与上面一样

    方式3:如果不知道具体高度,通过position+transform

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title></title>
        <style type="text/css">
            *{padding:0;margin:0;}
            .box{width:100px;height:100px;border:1px solid #ddd;position:relative;}
            .inner{background:red;position:absolute;top:50%;transform:translateY(-50%);}
        </style>
    </head>
    <body>
    <div class="box">
       <div class="inner">545454</div>
    </div>
    </body>
    </html>

    效果图:

    方式4:display:table-cell+vertical-align:middle

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title></title>
        <style type="text/css">
            *{padding:0;margin:0;}
            .box{width:100px;height:100px;border:1px solid #ddd;display:table-cell;vertical-align:middle;}
            .inner{background:red;}
        </style>
    </head>
    <body>
    <div class="box">
       <div class="inner">545454</div>
    </div>
    </body>
    </html>

     效果图:

    方式5:box布局,box-orient控制子元素是水平分布还是垂直分布,box-align让子元素垂直居中,box-pack让子元素水平居中

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title></title>
        <style type="text/css">
            *{padding:0;margin:0;}
            .box{width:100px;height:100px;border:1px solid #ddd;display:-webkit-box;-webkit-box-orient:vertical;-webkit-box-pack:center;-webkit-box-align:center;}
            .inner{background:red;height:20px;}
        </style>
    </head>
    <body>
    <div class="box">
       <div class="inner">54</div>
       <div class="inner">33</div>
    </div>
    </body>
    </html>

    效果图:

  • 相关阅读:
    [Swift-2019力扣杯春季初赛]2. 校园自行车分配
    php 遇到报错 Call to a member function fetch_object()
    Proactive Patching Overview
    PHP 官方说明
    SecureCRT 迁移到新环境,导出配置文件目录 转
    ORA-00020: maximum number of processes (300) exceeded
    转 SQL*PLUS中的替换变量(& &&)
    转 DOS(CMD)下批处理换行问题/命令行参数换行 arg ms-dos
    php 报错如下:Notice: Trying to get property of non-object
    mysqli 进一步分析
  • 原文地址:https://www.cnblogs.com/hesj/p/10523635.html
Copyright © 2020-2023  润新知