黑马程序员技术交流社区

标题: 【上海校区】css 块级元素、行内元素的水平、垂直居中方... [打印本页]

---

作者: 梦缠绕的时候    时间: 2018-10-18 09:17
标题: 【上海校区】css 块级元素、行内元素的水平、垂直居中方...
行内元素
div {
    /*div内的行内元素水平居中*/
    text-align: center;

    /*div内的行内元素垂直居中（即line-height设置为与height相同）*/
    height: 50px;
    line-height: 50px;
}
块级元素
1. 水平居中

  /*方案1*/
  div {
    width: 100px;
    margin: 0 auto;
  }

  /*方案2（负边距）：
    当元素左侧没有兄弟元素时可用，
    缺点是需要事先知道width
  */
  div {
    width: 100px;
    position: relative;
    margin-left: -50px;
    left: 50%;
  }

  /*方案3（负边距）：
    当元素左侧没有兄弟元素时可用，
    优点是不需要事先知道width，
    缺点是兼容性不好，IE9(-ms-)+才支持
  */
  div {
    width: 100px;
    position: relative;
    transform: translateX(-50%);
    left: 50%;
  }

  /*方案4（负边距）：
    流行，
    缺点是需要事先知道width
  */
  div {
    width: 100px;
    position: absolute;
    margin-left: -50px;
    left: 50%;
  }

  /*方案5（负边距）:
      优点是不需要事先知道width，
      缺点是兼容性不好，IE9(-ms-)+才支持
  */
  div {
    width: 100px;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
  }

  /*方案6*/
  div {
    width: 100px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
  }

  /*方案7：
      弹性盒子内部块级元素水平居中，
      优点是不需要知道width，
      缺点是兼容性不好，IE10(-ms-)+才支持
  */
  div {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
2. 垂直居中（直接根据父级高度设置margin未算入）

  /*方案1（负边距）:
    当元素上侧没有兄弟元素时可用
  */
  div {
    width: 100px;
    position: relative;
    top: 50%;
    margin-top: -50px;
  }
  /*方案2（负边距）:
    当元素上侧没有兄弟元素时可用
  */
  div {
    width: 100px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
  /*方案3（负边距）*/
  div {
    width: 100px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
  }
  /*方案4（负边距）*/
  div {
    width: 100px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  /*方案5*/
  div {
    width: 100px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
  }
  /*方案6：
      弹性盒子内部块级元素垂直居中，
      优点是不需要知道width，
      缺点是兼容性不好，IE10(-ms-)+才支持
  */
  div {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

---------------------
作者：Kirito丷
来源：CSDN
原文：https://blog.csdn.net/qq_33576343/article/details/81784645
版权声明：本文为博主原创文章，转载请附上博文链接！

---

作者: 不二晨    时间: 2018-10-18 16:16
奈斯

---

作者: 魔都黑马少年梦    时间: 2018-11-1 17:03

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2