空闲总结了下水平垂直居中方案,欢迎补充:

水平居中

水平居中有两种情况:

  • 子元素是内联元素

    这种那个情况下只需要在父元素定义: text-align:center;
    例子:
    html:

     //省略了body,html
    <div class="out-div">
    hello world
    </div>
    <div class="out-div">
    <span>
    same for a inline tag
    </span>
    </div>

    css:

     .out-div{
    height: 100px;
    background: blueviolet;
    text-align: center;
    border:1px solid black;
    }

    这里注意到out-div 并没有是设置水平宽度,然而其width依然占满了屏幕,这点在定宽块状元素的水平居中会谈。

  • 子元素是块状元素

    • 子素的width确定,也就是定宽情况,只需要设置margin: auto;即可
      例子:
      html:

      <div class="block-out-div">
      <div class="block-div"> </div>
      </div>

      css:

      .block-out-div
      {
      height: 100px;
      background: gold;
      margin:auto; //重点
      }
      .block-div{
      width: 50px;
      height: 50px;
      background: #cccccc;
      }

      原理: “正常流中的块级元素框的水平总和就等于父元素的width”(from css权威指南),这就是所谓块状元素正常情况下独占一行,一就是上面的div没设置width默认占满父元素的宽度。”在水平格式化的“7大属性”中,只有3个可以设置为auto: width, margin-left, margin-right”(from css权威指南),这七个值分别是 margin-left,border-left-width,padding-left,width,padding-right,border-right-width,margin-right
      .默认情况下这七个值应该等于父元素宽度.

    • 子元素宽度不确定
      这种情况下比较麻烦,但是解决方案有几种:
      1.利用table-cell原理,什么意思呢,table标签是特殊的标签,他会根据内容来确定自己宽度,所以在需要居中的内容里面套上一套table即可,相当套了一个定宽的块状元素,然后给这个table设置margin:auto即可
      具体示例如下:

      <div class="block-out-div">
      <table class="table-wrap">
      <tr>
      <td>
      <div class="no-width-box">
      宽度不确定
      </div>
      </td>
      </tr>
      </table>
      </div>

      只需设置table,css:

          .table-wrap{
      margin: auto;
      }

      这种做法缺点是增加了标签,破坏了语义化
      2.第二种简单的方式是直接给需要设置居中子元素设置:display:inline-block;使得子元素拥有内联元素的特性,这时候为父元素设置:text-align:center;就可以居中了.
      例子:
      html:

      <div class="block-out-div">
      <div class="no-width-box">
      宽度不确定
      </div>
      </div>

      css:

         .block-out-div
      {
      height: 100px;
      background: gold;
      border: 1px solid black;
      text-align: center;
      }
      .no-width-box{
      display: inline-block;
      }

      3.运用脱离文档流的方式,先给父元素设置position:relative;和left:50%;相当于把父元素整个移动百分五十%,但是对于子元素而已,他的整个应该是在父元素的中分线右边,这个时候对子元素设置rposition:relative;和left:-50%;就可以居中了。这里需要注意一点是relative 设置定位是不会脱离文档流的,他本身位置并没有变,可以理解视觉上的变化,这种情况下很可能会影响到别的元素,通过设置父元素float:left;来解决.
      例子:
      html,我一样用上面的html代码,改下css:

      <div class="block-out-div">
      <div class="no-width-box">
      宽度不确定
      </div>
      </div>

      css:

          .block-out-div
      {
      height: 100px;
      background: gold;
      border: 1px solid black;
      float: left;
      position: relative;
      left: 50%;
      }
      .no-width-box{
      position: relative;
      left: -50%;
      } display: inline-block;

      这种方式需要注意的是父元素已经脱离了文档流,已经脱离了文档流。

垂直居中

  • 单行文本
    这种情况不管子元素是内联还是块状,只要父元素高度确定,设置height的值和line-height值相同就可以垂直居中.
    例子:
    html:

    <div class="out-div">
    hello world
    </div>

    css:

    .out-div{
    height: 100px;
    background: blueviolet;
    border:1px solid black;
    line-height: 100px;
    }
  • 多行文本
    对于有多个元素需要居中的情况,有几种解决方案:
    1.table-cell,套上table标签,包括tr,td,设置table高度和父元素高度一样即可
    html:

     <div class="block-out-div">
    <table>
    <tr>
    <td>
    <div>
    宽度不确定
    </div>
    <div>
    宽度不确定
    </div>
    </td>
    </tr>
    </table>
    </div>

    css:

     table{
    height: 100px;
    }
    .block-out-div
    {
    height: 100px;
    border: 1px solid black;
    }

    这种方式原理是利用vertical-align:middle;这个属性设置对table类的标签的子元素居中,也就是display:table-cell的元素有效;当然也可以显示设置别的元素为table-cell,而且默认的table-cell元素,vertical-align为middle,所以,只要设置了display就行了。
    还有别的方式:比如可以通过设置position属性等.

h5 弹性盒子布局中

这个时候用flex,实现水平垂直居中变得很容易.
例子:

<div class="contianer">
<div class="child">
flex
</div>
</div>

css:

.contianer{
height: 100px;
display: flex;
justify-content: center; //水平居中
align-items: center; //垂直居中
}

css 水平垂直居中总结的更多相关文章

  1. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...

  2. css水平垂直居中对齐方式

    1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...

  3. 把简单做好也不简单-css水平垂直居中

    44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...

  4. CSS水平垂直居中的方法

    原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...

  5. CSS水平垂直居中的几种方法2

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  6. CSS水平垂直居中的几种方法

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  7. 常见的几种 CSS 水平垂直居中解决办法

    用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...

  8. 介绍一种css水平垂直居中的方法(非常好用!)

    这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...

  9. css水平垂直居中

    margin法(水平居中) 需要满足三个条件: 元素定宽 元素为块级元素或行内元素设置display:block 元素的margin-left和margin-right都必须设置为auto 三个条件缺 ...

随机推荐

  1. C#类继承和接口继承时一些模棱两可的问题[转]

    原文地址:http://www.cnblogs.com/harleyhu/archive/2012/11/29/2794809.html 1.在father定义的方法若含有virtual关键字,chi ...

  2. ASP.Net中的Web Resource

    http://support.microsoft.com/kb/910442,这是中文的,机器翻译的,不太容易看懂,英文的是:http://support.microsoft.com/kb/91044 ...

  3. ubuntu安装使用GitHub--PC端

    按照这个步骤安装并且初步使用 按照这个程序配置git的ssh,在git push时不用输入密码

  4. 限制action所接受的请求方式或请求参数

    原文:http://www.cnblogs.com/liukemng/p/3726897.html 2.限制action所接受的请求方式(get或post): 之前我们在HelloWorldContr ...

  5. hashmap的底层实现

    HashMap的底层实现都是数组+链表结构实现的,添加.删除.获取元素都是先计算hash值,根据hash值和table.length计算出index也就是table的数组的下标,然后进行相应的操作. ...

  6. LinuxStudyNote

    LinuxStudyNoteBy_Silvers:(E:\Video_Tutorials\Linux自学视频\linux视频教程-后盾网视频教程)22:25 2016/1/28============ ...

  7. NDK开发历程(一):android native code的调试方法

    引用:http://www.cnblogs.com/ychellboy/archive/2013/02/22/2922683.html 使用NDK在android上做开发是一件“痛并快乐着”的差事,之 ...

  8. 《zw版·Halcon-delphi系列原创教程》 Halcon分类函数015,vector矢量

    <zw版·Halcon-delphi系列原创教程> Halcon分类函数015,vector矢量 为方便阅读,在不影响说明的前提下,笔者对函数进行了简化: :: 用符号“**”,替换:“p ...

  9. nis,nfs,pam小结

    最近一周总算把nis/nfs配置起来,中间各种被坑,这里简单记录一下: 主要参考两个大牛的文章,柏青哥,鸟哥 配置完之后的功能是可以连接任意一台主机,所有主机之间共享HOME目录,而且每人都有一定的限 ...

  10. PMP考试

    今天是第二次PMP模拟考试,得了146分,比上次高25分,这次题目相对简单些,看来昨晚的复习没有白费,还是有效果的. 有些题目影响还是比较深刻,老外的项目管理思想是先规划好一切再执行(管理),比如信息 ...