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

水平居中

水平居中有两种情况:

  • 子元素是内联元素

    这种那个情况下只需要在父元素定义: 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. WireShar使用笔记

    1.下载wiresharp  官网下载 2.安装 安装后直接支持中文 很人性化哦 注意:一定要安装WinPcap 不然无法使用 3.

  2. SQLServer一次性删除重复的数据

    delete from [GCPCore].[GCP.Product].[CityMall] where  AreaID in(select AreaID from [GCPCore].[GCP.Pr ...

  3. 在DCOM 中不存在WORD、EXCEL等OFFICE组件

    DCOM里面没有与office相关的所有组件解决方法:先简单说下,操作步骤(项目演示完成后,补上图): Run MMC -32 File Add Remove Snap-in Component Se ...

  4. SSR———团队作业:小型论坛的设计与初步实现

    小型论坛的设计与初步实现 这次团队作业,我们设计的是一个小型论坛,作为团队中的一员,我主要负责对用户进行需求调研与对用户体验的过程拍摄总结,力求我们的项目在力所能及的范围内更加完美 视频:   度盘链 ...

  5. ANE 从入门到精通 --- 使用R* 访问资源

    在AIR4.0版本之前,ANE内无法使用R*,操作资源仅能使用getResourceID(). 对于接SDK来说尤为头疼. 不过4.0以后可以通过在打包时候指定platform.xml来直接使用R*访 ...

  6. Redis与Memcache的区别

    Redis与Memcache的区别 数据类型:  redis数据类型丰富,支持set liset等类型          memcache支持简单数据类型,需要客户端自己处理复杂对象 持久性: red ...

  7. gulp外挂 uglify 的使用

    1.js文件压缩 第一步:安装外挂 :  第二步:gulpfile.js 配置 : (首先看你的package.json 中有没有添加依赖,如果有 这一句,代表添加成功啦.) 输入以下代码 : var ...

  8. 19.在HTTP 1.0中,状态码401的含义是(?);如果返回“找不到文件”的提示,则可用 header 函数,其语句为(?)写出http常见的状态码和含义,至少5个.[完善题目]

    状态401代表未被授权,header("Location:www.xxx.php"); 100-199 用于指定客户端应相应的某些动作. 200-299 用于表示请求成功. 300 ...

  9. Apache2.4开启GZIP功能

    HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术.大流量的WEB站点常常使用GZIP压缩技术来让用户感受更快的速度.这一般是指WWW服务器中安装的一个功能,当有人来访问这个服务器中的 ...

  10. Android 监听返回键、HOME键

    拦截返回键,HOME键,继承BaseActivity即可 import android.app.Activity; import android.content.BroadcastReceiver; ...