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中常用的文件和目录操作(一)

    常用的文件操作 1. 打开文件 open,它是一个内置函数,可以直接调用 语法:file object = open(file_name, [access_mode]),这里我们会创建一个file对象 ...

  2. 如何显示u盘的隐藏的文件

    方法/步骤   从U盘属性可以看出,U盘的大量空间被占用,U盘内有很多文件.   点击查看选项卡下的“选项”按钮 切换到中间的“查看”选项卡 取消勾选“隐藏受保护的操作系统文件” 在弹出的警告对话框, ...

  3. gym强化学习入门demo——随机选取动作 其实有了这些动作和反馈值以后就可以用来训练DNN网络了

    # -*- coding: utf-8 -*- import gym import time env = gym.make('CartPole-v0') observation = env.reset ...

  4. secureCRT如何设置眼睛舒适的颜色

    1.会话选项 设置背景颜色 Options => Sessions options => Terminal => Emulation, 在 Terminal下拉列表下选择Linux, ...

  5. MySQL 各种引擎

    数据库中的存储引擎其实是对使用了InnoDB.HEAP(也称为MEMORY).CSV.BLACKHOLE(黑洞引擎).ARCHIVE.PERFORMANCE_SCHEMA. Berkeley.Merg ...

  6. Azure新建的CentOS设置root账户的密码

    前言:Azure在新建VM的时候的账户使用的是自定义的用户名和密码或者自定义的用户名使用公钥 1.使用自定义的用户名登录到服务器. 2.设置root的密码: sudo passwd root 3.按照 ...

  7. 欧拉函数 and 大数欧拉 （初步）

    前两天总结了素数筛法,其中就有Eular筛法.现在他又来了→→ φ(n),一般被称为欧拉函数.其定义为:小于n的正整数中与n互质的数的个数. 毕竟是伟大的数学家,所以以他名字命名的东西很多辣. 对于φ ...

  8. ZOJ2314 Reactor Cooling（有上下界的网络流）

    The terrorist group leaded by a well known international terrorist Ben Bladen is buliding a nuclear ...

  9. Eureka详解

    该章节紧接第三章,主要是对一些理论上的指导,帮助更好的理解服务治理. 基础架构 eureka服务治理的基础架构包含三个要素: 1)服务注册中心:eureka提供服务端,提供服务的注册与发现功能. 注: ...

  10. Day2-Python基础2---集合和文件操作

    一.集合操作 集合是一个无序的,不重复的数据组合,它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之前的交集.差集.并集等关系 s = set([1,4,5,7,3, ...