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. 从性能的角度谈SQL Server聚集索引键的选择

      简介 在SQL Server中,数据是按页进行存放的.而为表加上聚集索引后,SQL Server对于数据的查找就是按照聚集索引的列作为关键字进行了.因此对于聚集索引的选择对性能的影响就变得十分重要 ...

  2. 设计高效sql一般经验谈

      1不用在sql语句使用系统默认的保留关键字 2尽量用exists 和 not exists 代替 in 和 not in 这条在sql2005之后,在索引一样,统计信息一样的情况下,exists ...

  3. 计算客网络赛 Coin 二项式定理+逆元

    https://nanti.jisuanke.com/t/17115 Bob has a not even coin, every time he tosses the coin, the proba ...

  4. IDEA提交Git时忽略文件【ignore文件备份】

    IntellJ IDEA设置ignore文件忽略,需: 第一步:下载idea的ignore插件,链接:https://pan.baidu.com/s/14_cfq56g1s7Lc6LdiolvWA 密 ...

  5. 20180403_调bug_大地保险_jar包冲突

    一.异常现象 他们程序在本地通过java形式直接跑起来的时候,是正常的. 但是测试服务器上,程序跑到一半就不继续往下走了,而且,也不报错,日志里面没有任何信息. 二.异常解决 1.核心思想 抽丝剥茧, ...

  6. nyoj-1092-数字分隔（二）

    java大法好啊 思路:单独拿出整数部分分隔 题目链接 import java.math.BigDecimal; import java.util.Scanner; public class Main ...

  7. boost开发指南

    C++确实很复杂,神一样的0x不知道能否使C++变得纯粹和干爽? boost很复杂,感觉某些地方有过度设计和太过于就事论事的嫌疑,对实际开发工作的考虑太过于理想化.学习boost本身就是一个复杂度,有 ...

  8. [基本操作] Mobius 反演， Dirichlet 卷积和杜教筛

    Dirichlet 卷积是两个定义域在正整数上的函数的如下运算,符号为 $*$ $(f * g)(n) = \sum_{d|n}f(d)g(\frac{n}{d})$ 如果不强调 $n$ 可简写为 $ ...

  9. HttpServletRequest获取请求得URL信息

    request对象中包含的是请求信息,当我们在浏览器地址栏上输入:http://localhost:8080/Example/AServlet?username=zhangsan,这段地址也会作为请求 ...

  10. Codeforces 786B. Legacy 线段树+spfa

    题目大意: 给定一个\(n\)的点的图.求\(s\)到所有点的最短路 边的给定方式有三种: \(u \to v\) \(u \to [l,r]\) \([l,r] \to v\) 设\(q\)为给定边 ...