css水平居中，竖直居中技巧（一）
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水平居中，竖直居中技巧（一）的更多相关文章
- css水平居中，竖直居中技巧（二）
css水平居中,竖直居中技巧(二)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...
- css水平竖直居中方式
CSS水平和垂直居中的几种实现方法: 1.单行垂直居中 文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的 ...
- CSS -- 文字竖直居中
元素的height 和 lineheight 设置为一样即可.
- 水平/竖直居中在旧版Safari上的bug
今天调了两个出现在旧版Safari上的layout bug. 它们最初是在同事的iPad上被发现的, 我在自己桌面上安装的Safari 5.1.7上也能够复现. Bug1: .vertical-cen ...
- 常用布局，div竖直居中
常用两列布局,多列布局和div竖直居中 body { margin:; padding:; } .w200 { width: 200px; } .mar-left200 { margin-left: ...
- css控制竖直文字显示
假如有一天,你把水平文字看腻味了...... 我建议你不妨试试垂直文字显示,就像这样: 我 是 竖 直 显 示 的 : 哈哈! 言归正传,怎么把一段话,垂直显示呢? 方法1: //把下面代码另存为ht ...
- 三个css属性 设置文字竖直居中
display: flex; justify-content:center; align-items:Center;
- html的a标签display:block之后文字竖直居中
设置行高和a标签的高度一样就能居中,使用line-height
- html 水平竖直居中
line-height:容器高度 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
随机推荐
- unity脚本生命流程
渲染 OnPreCull: 在相机剔除场景之前调用此函数.相机可见的对象取决于剔除.OnPreCull 函数调用发生在剔除之前. OnBecameVisible/OnBecameInvisible: ...
- 分享知识-快乐自己：Spring线程池配置
Spring通过ThreadPoolTaskExecutor实现线程池技术,它是使用jdk中的Java.util.concurrent.ThreadPoolExecutor进行实现. Spring 配 ...
- 清北学堂（2019 5 1） part 4
今天讲数论 1.进制问题(将n转换成k进制数): 1.方法:短除法 将n/k,保存,将商当做新的n,将余数保存,直到商为0,将余数(包括0),倒序输出,即得n的k进制数 2.关于高精四则运算(我本以为 ...
- APP测试的那些坑
在记录app测试走过的那些坑之前,先总结下app测试的工作主要有哪些: 1.功能测试,无论是什么软件产品,必不可少的就是功能测试.我们需要测试这款app产品的功能是否完善,是否符合客户需求,是否符 ...
- hzau 1200 Choosy in Food
1200: Choosy in Food Time Limit: 1 Sec Memory Limit: 1280 MBSubmit: 32 Solved: 5[Submit][Status][W ...
- Highcharts中更新series的5种方法
用Highcharts画图时,经常需要更新所画的图表,最常见的就是改变数据以更新图表.在Highcarts中,数据对应的参数是series.这儿就以图1的柱状图为例,列举如何更新series的5种方法 ...
- angular复选框式js树形菜单（二）
删除(过滤)树形结构某一个子节点: function filterTreeData(treeData){ angular.forEach(treeData,function(item){ if (it ...
- css Flex布局（一）
网页布局(layout) 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 6个属性 ...
- hdoj-3791-二叉搜索树(二叉搜索树模板题)
#include <cstring> #include <cstdio> #include <iostream> using namespace std; type ...
- 烂泥Linux学习笔记
把最近学习过程中所写的文章整理了下:注意:本帖会持续性更新!!! 虚拟化篇:<烂泥:虚拟化KVM安装与配置><烂泥:KVM安装centos6.5系统><烂泥:KVM中安装 ...