[Web 前端] CSS篇之3. 如何保持浮层水平垂直居中
原文链接](http://www.cnblogs.com/yaliu/p/5190957.html)
浮层水平垂直居中方法
(一)利用绝对定位与transform
<div class="parent"> <div class="children"></div> </div>
将父元素定位(relative),子元素如下
.children{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform:translate(-50%,-50%);
background: black;
}
(二)利用flexbox
.parent{
justify-content:center;
align-items:center;
display: -webkit-flex;
}
[Web 前端] CSS篇之3. 如何保持浮层水平垂直居中的更多相关文章
- [Web 前端] CSS篇之 4. position 和 display 的取值和各自的意思和用法
讲一讲CSS的position/float/display都有哪些取值,它们相互叠加时的行为都是什么? 列出display的值,说明他们的作用.position的值, relative和absolu ...
- [Web 前端] CSS篇之2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法
cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...
- Web前端-CSS必备知识点
Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...
- WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
- 零基础学WEB前端-CSS
CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...
- web前端—css面试题
1.CSS 选择符有哪些? 2.CSS 优先级的选择过程? 优先级复合就近原则,同权重的情况下有限选择最近的属性. 载入样式的话是以最后载入的定位为准. 优先级: !important > id ...
- css进阶 04-如何让一个元素水平垂直居中?
04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...
- css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法?)
实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...
- CSS(九):设置盒子水平垂直居中
通过设置下面的样式可以使盒子水平垂直居中: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
随机推荐
- Serilog 记录日志
Serilog 记录日志 Serilog是.net里面非常不错的记录日志的库,另外一个我认为比较好的Log库是NLog. 在我个人的asp.net web api 2 基础框架(Github地址)里, ...
- grep 详解
grep 是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来.(global search regular expression(RE) and print out the l ...
- [代码审计]eyoucms前台未授权任意文件上传
0x00 背景 来公司差不多一年了,然而我却依旧没有转正.约莫着转正也要到九月了,去年九月来的,实习,转正用了一年.2333 废话不多说了,最近有其他的事要忙,很久没有代码审计了.难的挖不了,浅的没意 ...
- 网络设备Web登录检测工具device-phamer
网络设备Web登录检测工具device-phamer 为了便于管理和维护,大部分网络都提供了Web管理接口.Kali Linux提供了一款专用检测工具device-phamer.该工具可以批量检测 ...
- codevs 水过 骑马修栅栏
[问题描述] 农民John每年有很多栅栏要修理.他总是骑着马穿过每一个栅栏并修复它破损的地方. John是一个与其他农民一样懒的人.他讨厌骑马,因此从来不两次经过一个一个栅栏.你必须编一个程序,读入栅 ...
- java基础记录(一):开发环境的配置
一.JDK的安装与环境变量配置 1.jdk下载与安装. jdk1.8.0_192下载地址 下载完成后,双击运行安装文件.可以选择你要安装的位置或者直接下一步,等待安装完成,最后关闭. 2.配置环境变量 ...
- Codeforces 576D Flights for Regular Customers 矩阵快速幂+DP
题意: 给一个$n$点$m$边的连通图 每个边有一个权值$d$ 当且仅当当前走过的步数$\ge d$时 才可以走这条边 问从节点$1$到节点$n$的最短路 好神的一道题 直接写做法喽 首先我们对边按$ ...
- HDU 5832 A water problem 水题
A water problem 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5832 Description Two planets named H ...
- hdu 5761 Rower Bo 物理题
Rower Bo 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5761 Description There is a river on the Ca ...
- Springboot_StringRedisTemplate配置
@Bean public RedisTemplate<String, String> redisTemplate(RedisConnectionFactory factory) { Str ...