zoukankan      html  css  js  c++  java
  • 水平居中 和 垂直居中 方法总结

    水平居中

      行内元素:

         * 如果父元素是块级元素,则直接给父元素设置text-align:center;

         * 如果父元素是不是块级元素,先将父元素设置为块级元素,再给父元素设置text-align:center;

      块级元素:

        * 需要谁居中,给其设置 margin: 0 auto

        * 父元素设置相对定位,子元素设为: position:absolute;left: 50%;margin-left:-元素宽度的一半

        *父元素设置相对定位,子元素设为: position:absolute;left: 50%;transform:translateX(-50%)

        * 使用flexbox布局,父元素设置: dispaly: flex;justify-content: center;

    垂直居中

      行元素:

         单行的行内元素:设置行高等于高度即可 ling-height= height

        *  多行的行内元素: 给父元素设置 display: table-cell;vertical-align: middle

      块级元素:

        *父元素设置相对定位,子元素设置:position:sabsolute;top: 50%;margin-top:-元素高度的一半

         * 父元素设置相对定位,子元素设置: position:absolute;top: 50%; transform:translateY(-50%);

        * 使用flexbox布局,父元素设置:display: flex;align-items: center;

    水平垂直居中

      已知宽高:

        * 设置父元素为相对定位,子元素设置:position:absolute;top:0;left:0;right:0;bottom:0; 200px;height:200px;margin:auto;

        * 设置父元素为相对定位,子元素设置:position:absolute;left: 50%;top:50%;200px;height:200px;margin-top:-100px;margin-left: -100px;

      未知宽高:

        *设置父元素为相对定位,子元素设置:position:absolute;top: 50%;left:50%;transform:translate(-50%,-50%);

        * 使用flexbox布局:父元素设置:display:flex;align-items:center;justify-content:center;

  • 相关阅读:
    001_jdk配置
    mysql(5.7)安装教程
    mysql(5.6)安装教程
    外网发布
    蓝桥 历届试题 分考场
    蓝桥 历届试题 合根植物
    Codeforces Round #650 (Div. 3) D : Task On The Board
    HDU 3336 Count the string
    leetcode [238. 除自身以外数组的乘积]
    leetcode [837. 新21点]
  • 原文地址:https://www.cnblogs.com/yangkangkang/p/11347052.html
Copyright © 2011-2022 走看看