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. nginx 支持ie 6 等低版本https 的配置

    nginx 配置 https 支持ie6 等低版本(主要是加密套件的问题) server { listen 443 ssl; server_name itapiway.demo.com; ssl_ce ...

  2. 简明 Python 教程--学习记录

    注意,我们在print语句的结尾使用了一个 逗号 来消除每个print语句自动打印的换行符.这样做有点难看,不过确实简单有效. print # prints a blank line 注意,没有返回值 ...

  3. 【转】刚发现一个linux在线文档库。很好很强大。

    原文网址:http://blog.csdn.net/longxibendi/article/details/6048231 1.网址: http://www.mjmwired.net 2.比如查看这个 ...

  4. bzoj 1069 [SCOI2007]最大土地面积——旋转卡壳

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1069 发现 n 可以 n^2 .所以枚举对角线,分开的两部分三角形就可以旋转卡壳了. 注意坐 ...

  5. Eclipse与IDEA快捷键对比

    from:http://blog.csdn.net/dc_726/article/details/9531281 花了一天时间熟悉IDEA的各种操作,将各种快捷键都试了一下,感觉很是不错!于是就整理了 ...

  6. Python——基础数据类型(补充)

    1.基础数据类型汇总补充 (1)小数据池:   为了节省空间,数字和字符串有,其他的没有[了解]   数字:-5---256之间的数字共用一个内存地址 #(1)i1 = i2 id(i1) == id ...

  7. Sublime + python2.7 + opencv （轻量级开发环境）

    工具: 1. Python2.7,安装完成 2. 相应版本的cv2.pyd,放入到…\Python27\Lib\site-packages\下 3. 下载Sublime Text 3,破解它,网上搜个 ...

  8. 让输入的字符转义成html实体的方法

    使用 htmlspecialchars() 函数,代码不会执行,因为会被保存为转义代码 总结测试方法: https://www.cnblogs.com/kaibindirver/p/10321448. ...

  9. es6 一些小知识

    本人最近被es6感兴趣了,学习一些,以下就是自己总结的一些小知识 1.当你在百度输入"es6"关键字,点击进入es6入门,首先你需要知道怎样学习的顺序,先看第21章Module语法 ...

  10. mybatis-plus 学习笔记

    一.首先是POM <dependencies> <dependency> <groupId>org.springframework.boot</groupId ...