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;} 
  • 相关阅读:
    Docker学习(一)
    mysql定时任务
    如何查看电脑是几核的?
    卸载Mysql connect 6.9.9
    找不到该项目怎么删除
    jmeter录制app脚本
    postman使用
    排查linux系统是否被入侵
    部署apache-tomcat环境
    sudo初级授权设置
  • 原文地址:https://www.cnblogs.com/sheqiuluo/p/6836345.html
Copyright © 2011-2022 走看看