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


### 2.代码
#### 2.1.index.html
<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <meta name="renderer" content="webkit">

    <title></title>

    <link rel="stylesheet/less" type="text/css" href="test.less"/>

    <script type="text/javascript" charset="utf-8"

            src="http://lib.jxt189.com/otherlib/less/2.6.1/dist/less.min.js"></script>

</head>

<body>

<h2>原始的效果</h2>

<div class="container">

    <div>

        <div>aaa</div>

        <div>bbbbbb</div>

        <div>ccccccccc</div>

    </div>

</div>

<hr>

<h2>居中后的效果</h2>

<div class="container container-01">

    <div class="container-02">

        <div>aaa</div>

        <div>bbbbbb</div>

        <div>ccccccccc</div>

    </div>

</div>

</body>

</html>

　　

#### 2.2.test.less
.container {

  width: 500px;

  height: 300px;

  background: red;

}

//核心代码

.container-01 {

  display: table;

  .container-02 {

    display: table-cell;

    vertical-align: middle;

    text-align: center;

  }

}

###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. 转 neighbour table overflow 问题解决

    接到保障,说某来机器服务没法访问,于是,准备连接到机器上去看个究竟. 尼玛居然连不上,连ping都ping不通,无奈只能求助机房. 机房人员检查, 发现报 neighbour table overfl ...

  2. Attribute的妙用 ---- 拦截器（过滤器）

    一.何为Attribute 下面是微软官方对Attribute的解释: 公共语言运行时允许你添加类似关键字的描述声明,叫做Attributes,它对程序中的元素进行标注,如类型.字段.方法和属性等.A ...

  3. 【转】linux中shell变量$#,$@,$0,$1,$2的含义解释

    原文网址:http://www.cnblogs.com/fhefh/archive/2011/04/15/2017613.html linux中shell变量$#,$@,$0,$1,$2的含义解释: ...

  4. Google Cloud IAM中添加自定义域名

    Google Cloud支持在IAM中加入自定义域名.具体方法如下: 1. 登录Google Cloud Console,点击IAM和管理,进入身份和组织 2. 点击注册 3. 会重定向到Gmail到 ...

  5. 贴几个erlang文档站点

    国外三方的文档,比较全, http://erldocs.com/ 这个貌似是国内的版本,不是很新 http://erldoc.com/ 国内dhq大神的,也不是很新 http://dhq.me/erl ...

  6. find: ‘/run/user/1000/gvfs’: Permission denied

    linux使用命令   find / -name ***  查找文件的时候会遇到以下报错 /gvfs’: Permission denied 其实这个目录是空的,查不查都没关系.所以,以下解决方式比较 ...

  7. js正则表达式验证大全--转载

    转载来源:http://www.cnblogs.com/hai-ping/articles/2997538.html#undefined //判断输入内容是否为空 function IsNull(){ ...

  8. Log4j配置详解之log4j.xml

    Log4j配置详解之log4j.xml Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息. ...

  9. kotlin学习一：kotlin简介

    kotlin是JetBrains公司出品的基于JVM的语言,和其他JVM语言一样,目的在于提供比JAVA更加简介的语法, 同时提供函数式编程,不需要再像JAVA一样所有的一切都要依托于类. kotli ...

  10. 给iOS开发新手送点福利,简述UILabel的属性和用法

    UILabel属性 1.text:设置标签显示文本. label.text = @"我是Label"; 2.attributedText:设置标签属性文本. NSString *t ...