zoukankan      html  css  js  c++  java
  • css中的居中的方法

    一、垂直居中

    (1)inline或者inline-*元素

       1. 单行文字

    • 设置上下padding相等

       以前一直以为inline元素是没有上下的padding和margin的,其实不然,他们是有上下的padding和margin的,只是不会讲父元素撑开,所以称为残疾的盒模型。

    • 将height与line-height设置相等,这个应该是用的最多了。

      2. 多行文字

    • 设置上下padding相等
    • 设置vertical-align:middle

    (2)块级元素

      1. 使用display:flex

      2. 使用display:table和table-cell,详见这里

      3. 使用绝对定位:

    复制代码
    .parent { 
    position: relative;
    } .child {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    }
    复制代码

    二、水平居中

     (1)inline或者inline-*元素

          设置text-align:center

     (2)一个块级元素

    • 设置margin:0 auto;
    • 使用绝对定位
    复制代码
    .parent {
      position: relative;
    }
    .child {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    复制代码

          上面这段css实现了水平和垂直都能居中,也可以单纯的使用translateX来定位,和上面的垂直定位类似

     (3)多个块级元素

           使用display:flex

  • 相关阅读:
    jquery-scrollstop
    Grunt usemin
    HTML5 之文件操作(file)
    启动mongodb bat
    判断是否支持WebP
    前端攻略系列(一)
    impress.js初体验
    JS应用实例3:定时弹出广告
    JS应用实例2:轮播图
    JS应用实例1:注册页面表单校验
  • 原文地址:https://www.cnblogs.com/hfeng007/p/9178408.html
Copyright © 2011-2022 走看看