scss : div水平垂直居中
scss 是一个很好用的css预处理语言,有很多很好的特性。
比如 mixin。
我们可以像使用函数那样使用mixin。
比如写一个div水平垂直居中。
上代码。
@mixin absolute_center_mixin($width, $height){
position: absolute;
top: 50%;
left: 50%;
margin-left: -($width / 2);
margin-top: -($height / 2);
width: $width;
height: $height;
background: #000;
} html{
body{
.main{
.left{
position: relative;
.box{
@include absolute_center_mixin(3.106297rem, 1.405564rem);
}
}
}
}
}
用vscode的scss live compiler插件可以很方便的编写scss,他会帮你自动编译成css。
以上。
scss : div水平垂直居中的更多相关文章
- 如何让div水平垂直居中
引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...
- 文字以及div水平垂直居中
文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...
- 【笔记】让DIV水平垂直居中的两种方法
今天写的了百度前端学院春季班的任务:定位和居中问题 由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...
- DIV水平垂直居中的CSS兼容写法
DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...
- Div水平垂直居中的三种方法
百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...
- 【最全】CSS盒子(div)水平垂直居中居然还有这种方式
最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...
- 【html】【10】div布局[div水平垂直居中]
必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...
- 未知宽高div水平垂直居中3种方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...
- 如何将一个div水平垂直居中?4种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
随机推荐
- Java并发编程-Unsafe实现原理与Unsafe应用解析
前言 Unsafe是位于sun.misc包下的一个类,主要提供一些用于执行低级别.不安全操作的方法,如直接访问系统内存资源.自主管理内存资源等,这些方法在提升Java运行效率.增强Java语言底层资源 ...
- ZooKeeper开机启动的俩种方式
两种方式可以实现开机自启动 第一种:直接修改/etc/rc.d/rc.local文件 在/etc/rc.d/rc.local文件中需要输入两行, 其中export JAVA_HOME=/usr/jav ...
- Linux软件服务管理
学习该课程之前先学习linux的软件安装管理 1.linux的运行级别有下面几种类型 在后面的服务启动管理之中会被使用到 [root@weiyuan httpd-2.4.20]# runlevel N ...
- Matlab矩阵间快速赋值方法
目前还没见到网上用过这个简单的方式 A= [1 2 3; 4 5 6; 7 8 9] B = zeros(5,5) B(1:3, 2:4) = A %将A赋值到B的第1行到3行,第2列岛4列, ...
- 平时Chrome中用的一些插件
一.chrome://extensions Adblock Plus Dark Reader 让网站黑色主题 Infinity 新标签页 一个比较流行的新标签页工具 GNOME Shell integ ...
- 实现MFC扩展DLL中导出类和对话框
如果要编写模块化的软件,就要对对动态链接库(DLL)有一定的了解,本人这段时间在修改以前的软件时,决定把重复用的类和对话框做到DLL中,下面就从一个简单的例子讲起,如何实现MFC扩展DLL中导出类和对 ...
- idea 启动官网spring boot demo 报错
*************************** APPLICATION FAILED TO START *************************** Description: Fai ...
- 模拟elementUI或使用自定义属性简单封装对话框
前言 现在前端框架有许多的UI框架可以选择,但是样式或者功能不一定是我们项目中想要的,因此很多时候需要自己封装.此篇文件简单介绍一下利用自定义标签或者自定义扩展属性来封装UI组件,方便项目的其他地方复 ...
- 关键字 package 和 import
1. package的使用 1.1 使用说明: * 1.为了更好的实现项目中类的管理,提供包的概念 * 2.使用package声明类或接口所属的包,声明在源文件的首行 * 3.包,属于标识符,遵循标识 ...
- POJ 3057 Evacuation 题解
题目 Fires can be disastrous, especially when a fire breaks out in a room that is completely filled wi ...