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. 【数据库】sql连表查询

    SQL总结 连表查询 连接查询包括合并.内连接.外连接和交叉连接,如果涉及多表查询,了解这些连接的特点很重要. 只有真正了解它们之间的区别,才能正确使用. 1.Union UNION 操作符用于合并两 ...

  2. docker swarm mode routing mesh 使用

    Docker Engine swarm mode makes it easy to publish ports for services to make them available to resou ...

  3. 【剑指offer】Q14：调整数组顺序使奇数位于偶数前面

    def isOdd(n): return n & 1 def Reorder(data, cf = isOdd): odd = 0 even = len( data ) - 1 while T ...

  4. C语言控制台窗体图形界面编程（八）：鼠标事件

           上次讲的是键盘事件,这次我们介绍鼠标事件. 以下先介绍下鼠标事件的结构体以及相关信息. typedef struct _MOUSE_EVENT_RECORD //鼠标事件结构体 { CO ...

  5. Wordpress主题站

    深度剖析WordPress主题结构 http://down.chinaz.com/try/201106/640_1.htm wordpress工作原理 http://blog.csdn.net/liu ...

  6. FastAdmin 如何查看 ICON 名字？

    FastAdmin 如何查看 ICON 名字? 群问题: [A货] ★^猪大胖-镇江 我想问问大家谁知道如何快速查找icon的name 每次我都要编辑权限那里去复制 [吐槽]孤狼-海口 2018/4/ ...

  7. Android getevent用法详解

    getevent 指令用于获取 input 输入事件,比如获取按键上报信息.获取触摸屏上报信息等. 指令源码路径:/system/core/toolbox/getevent.c getevent -h ...

  8. 关于WebSecurityConfigurerAdapter和ResourceServerConfigurerAdapter源码分析

    前言:优先级高于ResourceServerConfigurer,用于保护oauth相关的endpoints,同时主要作用于用户的登录(form login,Basic auth) WebSecuri ...

  9. centos 安装 Splunk

    (1).需关闭selinux: 1. vi /etc/sysconfig/selinux    SELINUX=disabled (2).开始安装mkdir  \splunk http://downl ...

  10. Centos7.4 版本环境下安装Mysql5.7操作记录

    Centos7.x版本下针对Mysql的安装和使用多少跟之前的Centos6之前版本有所不同的,废话就不多赘述了,下面介绍下在centos7.x环境里安装mysql5.7的几种方法: 一.yum方式安 ...