css实现div,文字水平居中的方案。

  本文的目的为记录个人开发中常用的几种居中方案,以供大家参考。  

  //basic css

  html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  ************************************************居中相关************************************************
  假设div的宽高均为100px。
  1.div水平居中,直接使用margin:0 auto;

  2.使用绝对定位让div水平垂直居中。(若想要div在某个特定的容器中水平垂直居中,则需要把容器的position设置为relative)
  .div {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 100px;
    width: 100px;
    margin: -50px 0 0 -50px;
  }

  3.使用相对定位让div水平垂直居中。
  .div {
    position: relative;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
  }

  4.文字的水平居中,直接设置容器text-align: center;

  5.文字的水平垂直居中, 设置容器text-align: center; line-height: 容器的高度;

  ************************************************居中相关************************************************

上一篇:Examples For PLSQL Cursors - Explicit, Implicit And Ref Cursors


下一篇:ELK监控系统nginx / mysql慢日志