zoukankan      html  css  js  c++  java
  • 结构与布局-垂直居中

    <style>
         /*第一种*/
            /*main{
                18em;height:6em;position: absolute;top:50%;left:50%;
                margin-left:-9em;margin-top:-3em;background: #631082;
                text-align: center; 
            }*/
            /*第二种*/
            /*main{
                position: absolute;
                top:calc(50% - 3em);
                left:calc(50% - 9em);
                 18em;
                height:6em;
                background: #129074;
                color:#fff;
            }*/
            /*  第三种*/
            /*main{
                position: absolute;
                top:50%;
                left:50%;
                transform: translate(-50%,-50%);
                background: #96770a;
            }*/
            /*第四种*/
            /*main{
                 18em;
                padding: 1em 1.5em;
                margin: 50% auto 0;
                margin: 50vh auto 0;
                transform: translateY(-50%);
                background: #823810;
            }*/
            /*第五种*/
            body{
                display: flex;
                min-height: 100vh;
                margin: 0;
            }
            main{margin:auto;background: #91149c;}
            /*第六种 然而并没有居中*/
            /*main{
                display: flex;
                align-items: center;
                justify-content: center;
                18em;
                height:10em;
                background: #980f26;
            }*/

        </style>
  • 相关阅读:
    【472】proceedings 改投 journals
    【471】Keras 深度神经网络实现
    iOS websocket接入的简单使用
    Windows下安装gazebo
    详解ROS文件系统
    /home/qian/anaconda3/lib/libpng16.so.16: undefined reference to `inflateValidate@ZLIB_1.2.9'
    /usr/lib/*** is not a symbolic link问题解决
    SC_leGO_LOAM安装使用
    3D激光slam开源框架汇总
    PCL——(10)PCL中使用随机采样一致性模型
  • 原文地址:https://www.cnblogs.com/pikachuworld/p/10721115.html
Copyright © 2011-2022 走看看