zoukankan      html  css  js  c++  java
  • CSS总结(六)——元素的垂直居中(已知高度/未知高度)

    元素的垂直居中
     1、已知高度宽度元素的水平垂直居中
     
        ①  绝对定位居中
             .center{
                        margin:auto;
                        position:absolute;
                        top:0;
                        left:0;
                        bottom:0;
                        right:0;
                      }
     
        ②  绝对定位与负边距实现
             .center{
                        100px;
                        height:100px;
                        position:absolute;
                        top:50%;
                        left:50%;
                        margin:-50px 0 0 -50px;
                      }
     
    2、未知高度宽度元素的水平垂直居中
        ①  当元素为inline 或 inline-block时
             #content {
                           display:table-cell;         //表格单元格显示         
                           text-align:center;         //文本水平居中对齐
                           vertical-align:middle;    //元素垂直居中对齐
                          }
             #center{ }
     
        ②  利用css3的 transform 
             # content {
                             position:relative;
                            }
             #center {
                            position:absolute;
                            top:50%;
                            left:50%;
                            transform:translate(-50%,-50%);     //定义2D转换
                           }
     
       ③   利用css3的 flex 布局  — CSS3 flex容器,所有子元素为容器成员(火狐、谷歌支持)
             #content{
                          display:flex;
                          justify-content:center;   //在主轴上居中对齐
                          align-items:center;        //在交叉轴上居中对齐
                          }
             #center{ }
     
    ps:transform 和 flex 虽高效好用,但存在很多兼容问题。
  • 相关阅读:
    vscode 鸿蒙开发板hi3861 hispark需要使用Jlink V10以上版本仿真器,才支持RISC-V,在线调试
    hi3861 hispark GDB openOCD 调试器仿真器在vscode中如何使用呢?
    ArduinoUNO R3接口定义
    OpenOCD-HI3861-RISCV使用方法 (JTAG/DTM+SWD/CoreSight)调试器仿真器
    c#字符串序列化-字符串转对象转字符串
    c#winform设置字体字号大小
    SAP MM——常用表
    C++ WIN32 日志程序
    C++ WIN32 程序 ,从屏幕输入 数据 然后给WCHAR 数组赋值
    Ubuntu 16.04开启SFTP服务
  • 原文地址:https://www.cnblogs.com/emory/p/5302949.html
Copyright © 2011-2022 走看看