1. css水平居中，竖直居中技巧（二）
    ===
    ### 1.效果

  1.  
  2. ### 2.代码
    #### 2.1.index.html
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  7.     <meta name="renderer" content="webkit">
  8.     <title></title>
  9.  
  10.     <link rel="stylesheet/less" type="text/css" href="test.less"/>
  11.     <script type="text/javascript" charset="utf-8"
  12.             src="http://lib.jxt189.com/otherlib/less/2.6.1/dist/less.min.js"></script>
  13. </head>
  14. <body>
  15. <h2>原始的效果</h2>
  16. <div class="container">
  17.     <div>
  18.         <div>aaa</div>
  19.         <div>bbbbbb</div>
  20.         <div>ccccccccc</div>
  21.     </div>
  22. </div>
  23. <hr>
  24. <h2>居中后的效果</h2>
  25. <div class="container container-01">
  26.     <div class="container-02">
  27.         <div>aaa</div>
  28.         <div>bbbbbb</div>
  29.         <div>ccccccccc</div>
  30.     </div>
  31. </div>
  32. </body>
  33. </html>

　　

  1. #### 2.2.test.less
  1. .container {
  2.   width: 500px;
  3.   height: 300px;
  4.   background: red;
  5. }
  6.  
  7. //核心代码
  8. .container-01 {
  9.   display: table;
  10.  
  11.   .container-02 {
  12.     display: table-cell;
  13.     vertical-align: middle;
  14.     text-align: center;
  15.   }
  16. }
  1. ###3.说明
    a.使用这种方式实现水平居中和垂直居中，对`.container-02`的容器没有宽度和高度的要求

css水平居中，竖直居中技巧（二）的更多相关文章

  1. css水平居中，竖直居中技巧（一）

    css水平居中,竖直居中技巧(一)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...

  2. css水平竖直居中方式

    CSS水平和垂直居中的几种实现方法: 1.单行垂直居中 文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的 ...

  3. CSS -- 文字竖直居中

    元素的height 和 lineheight 设置为一样即可.

  4. 水平/竖直居中在旧版Safari上的bug

    今天调了两个出现在旧版Safari上的layout bug. 它们最初是在同事的iPad上被发现的, 我在自己桌面上安装的Safari 5.1.7上也能够复现. Bug1: .vertical-cen ...

  5. 常用布局，div竖直居中

    常用两列布局,多列布局和div竖直居中 body { margin:; padding:; } .w200 { width: 200px; } .mar-left200 { margin-left: ...

  6. css控制竖直文字显示

    假如有一天,你把水平文字看腻味了...... 我建议你不妨试试垂直文字显示,就像这样: 我 是 竖 直 显 示 的 : 哈哈! 言归正传,怎么把一段话,垂直显示呢? 方法1: //把下面代码另存为ht ...

  7. 三个css属性 设置文字竖直居中

    display: flex; justify-content:center; align-items:Center;

  8. html的a标签display:block之后文字竖直居中

    设置行高和a标签的高度一样就能居中,使用line-height

  9. html 水平竖直居中

    line-height:容器高度 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

随机推荐

  1. vue的动画组件（transition）

    当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名. v-enter: 定 ...

  2. 老齐python-基础6(循环 if while for)

    1.条件语句if 依据某个条件,满足这个条件后执行下面的内容 >>> if bool(conj): #语法 do something >>> a = 8 >& ...

  3. springMvc架构简介

    什么是spring 关于spring的定义无论是从官方还是市面上已经很多能够清晰明了的做出解释了.我姑且简单定义它为一个轻量级的控制反转(IoC)和面向切面(AOP)的容器,Java 开发框架,至于控 ...

  4. CRITICAL:yum.cli:Config Error: Error accessing file for config file:///etc/yum.conf

    先试试yum install gcc  , 1,下载最新的yum-3.2.28.tar.gz并解压 #wget http://yum.baseurl.org/download/3.2/yum-3.2. ...

  5. MySQL Join算法与调优白皮书（三）

    Batched Key Access Join Index Nested-Loop Join虽好,但是通过辅助索引进行链接后需要回表,这里需要大量的随机I/O操作.若能优化随机I/O,那么就能极大的提 ...

  6. mac下的安装神奇 brew --例子 安装 mysql

    da打开终端 输入bre 输入 bre search mysql (查找mysql版本) 输入 bre install mysql@5.6(选择mysql版本安装)

  7. appium+python自动化32-android_uiautomator定位进阶版

    前言 上一篇介绍uiautomator的定位方式都是类似这种'new UiSelector().xxx("xxx")',看起非常长,我也记不住,这很不python.于是本篇优化了定 ...

  8. OSGi学习－总结

    本文是osgi实战一书的前几章读书总结 1.  OSGi简介 Java缺少对高级模块化的支持,为了弥补Java在模块化方面的不足,大多数管理得当的项目都会要求建立一整套技术,包括: 适应逻辑结构的编程 ...

  9. WindowsPhone自定义控件详解（一） - 控件类库分析

    转自:http://blog.csdn.net/mr_raptor/article/details/7251942 为了让你的应用程序更有个性,我们通常会在WP7开发过程中会自定义自己风格的控件,自定 ...

  10. 转 ：关于springmvc使用拦截器

    原博客: http://elim.iteye.com/blog/1750680 SpringMVC 中的Interceptor 拦截器也是相当重要和相当有用的,它的主要作用是拦截用户的请求并进行相应的 ...