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 class="inner-container">

        <div>aaa</div>

        <div>bbbbbb</div>

        <div>ccccccccc</div>

    </div>

</div>

<hr>

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

<div class="container container-01">

    <div class="inner-container 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;

}

.inner-container {

  background: yellow;

}

//核心代码

.container-01 {

  position: relative;

  .container-02 {

    @width: 150px;

    @height: 100px;

    width: @width;

    height: @height;

    position: absolute;

    top: 50%;

    left: 50%;

    margin-top: -1*(@height / 2);

    margin-left: -1*(@width / 2);

  }

}
###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. python切片、迭代、生成器、列表生成式等高级特性学习

    python高级特性 1行代码能实现的功能,决不写5行代码.请始终牢记,代码越少,开发效率越高. 切片 当我们要取一个list中的前n各元素时,如果前n个少的话,我们还可以一个一个的取,但是若前n个元 ...

  2. Linux下安装scrapy包出错

    pip install -i https://pypi.douban.com/simple/ scrapy 出现错误: error: command 将依赖包装全. sudo apt-get inst ...

  3. MySQL 约束和数据库设计

    1.MySQL 约束: 1.约束的概念: 约束是一种限制,它通过对表的行或列的数据做出限制,来确保表的数据的完整性.唯一性. MySQL中,常用的几种约束: 约束类型: 非空 主键 唯一 外键 默认值 ...

  4. 15_游戏编程模式EventQueue

    #### 两个例子 .GUI event loop ``` while (running) { // 从事件队列里获取一个事件 Event event = getNextEvent(); // Han ...

  5. MySQL多种安装方式选择

    1.rpm包安装方式 rpm包的安装方式非常简单,这里以el6平台下的mysql-5.6.34版本为例,首先,要通过上述搜狐镜像地址下载到如下四个MySQL相关软件安装包. a.下载安装包 MySQL ...

  6. php 利用header 函数 下载各种文件

    http://www.php.net/manual/en/function.readfile.php <?php /** * 下载文件 * header函数 * */ dl_file($_GET ...

  7. HihoCoder1080 更为复杂的买卖房屋姿势(线段树+多重lazy)

    描述 小Hi和小Ho都是游戏迷,“模拟都市”是他们非常喜欢的一个游戏,在这个游戏里面他们可以化身上帝模式,买卖房产. 在这个游戏里,会不断的发生如下两种事件:一种是房屋自发的涨价或者降价,而另一种是政 ...

  8. idea 创建maven工程(入门)

    转:http://blog.csdn.net/qq_32588349/article/details/51461182 1. 下载Maven 官方地址:http://maven.apache.org/ ...

  9. [BZOJ1242]Fishing Net

    dbzoj vjudge1 vjudge2 sol 给一个无向图,求判定是不是弦图. sol 还是弦图那套理论. 复杂度是\(O(n^2)\)的,因为\(m\)本质上和\(n^2\)是同级的. cod ...

  10. 洛谷 P2822 组合数问题

    题目描述 组合数C_n^mC​n​m​​表示的是从n个物品中选出m个物品的方案数.举个例子,从(1,2,3) 三个物品中选择两个物品可以有(1,2),(1,3),(2,3)这三种选择方法.根据组合数的 ...