zoukankan      html  css  js  c++  java
  • 最全元素水平垂直居中方法

    1.水平居中

    1.1已知宽度块元素宽度 :

    .child{1000px;margin:0 auto;}
    

    1.2文本内容居中:

    .parent{text-align:center;}
    

    1.3通过表格:

    .child{display:table;margin:0 auto;}
    

    1.4已知宽度,通过设置position:absolute,margin-left为宽度的负一半

    .parent{position:relative;}
    .child{position:absolute;left:50%;150px;margin-left:-75px;}
    

    1.5未知宽度,通过设置position:absolute

    .parent{position:relative;}
    .child{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);}
    

    1.6使用flex布局实现(兼容性不好,感觉有点变成浮动的效果,不在文档流)

    第一种:.parent{display:flex;justify-content:center;}
    第二种:.parent{display:flex;}.child{margin:0 auto;} 
    

    2.垂直居中

    2.1文本垂直居中 .child{height:20px;line-height:20px}

    2.2vertial-align:middle;

        第一种方法:.parent{display:table-cell;vertical-align:middle;height:20px;}
        第二种方法:.parent{display:inline-block;vertical-align:middle;line-height:20px;} 
    

    2.3未知高度,设置position:absolute

        .parent{position:relative;}
        .child{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
    

    2.4已知高度,设置position:absolute,margin-top为高度的负一半

        .parent{position:relative;}
        .child{position:absolute;top:50%;height:150px;margin-top:-75px;}
    

    2.5使用flex布局实现

        .parent{display:flex;align-items:center;} 
  • 相关阅读:
    链接Oracle数据库
    Spring boot Mybatis
    Spring Boot 部署
    javaEE应用组件
    maven项目搭建步骤
    Spring Boot中Redis的使用
    Struts2 Hello,Wold
    使用JSON
    Spring中Quartz的配置
    Guice示例
  • 原文地址:https://www.cnblogs.com/sheqiuluo/p/6836345.html
Copyright © 2011-2022 走看看