原文链接](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. 如何保持浮层水平垂直居中的更多相关文章

  1. [Web 前端] CSS篇之 4. position 和 display 的取值和各自的意思和用法

    讲一讲CSS的position/float/display都有哪些取值,它们相互叠加时的行为都是什么?  列出display的值,说明他们的作用.position的值, relative和absolu ...

  2. [Web 前端] CSS篇之2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法

    cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...

  3. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  4. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  5. 零基础学WEB前端-CSS

    CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现 ...

  6. web前端—css面试题

    1.CSS 选择符有哪些? 2.CSS 优先级的选择过程? 优先级复合就近原则,同权重的情况下有限选择最近的属性. 载入样式的话是以最后载入的定位为准. 优先级: !important > id ...

  7. css进阶 04-如何让一个元素水平垂直居中?

    04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...

  8. css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法?)

    实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...

  9. CSS(九):设置盒子水平垂直居中

    通过设置下面的样式可以使盒子水平垂直居中: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

随机推荐

  1. 【LOJ】#2551. 「JSOI2018」列队

    题解 老年选手一道裸的主席树都要看好久才看出来 首先熟练的把这个区间建成\(n\)个主席树 然后对于一个询问,我们相当于在主席树上二分一个mid,使得\(mid - K + 1\)正好和\([l,r] ...

  2. NAT虚拟网络配置

     NAT虚拟网络配置(Linux能上网) 1.先设置虚拟机的虚拟网络,设置里面的子网ip和网关ip地址: 有两种方式:①setup命令(不选DHCP,因为它是动态分配IP地址的) ②vi /etc/s ...

  3. 关于replacePlaceholders

    现在还没有完全验证好,有空看看报错信息 https://www.cnblogs.com/fanguangdexiaoyuer/p/5788432.html 1.目录结构 2. package cn.c ...

  4. 033 Java Spark的编程

    1.Java SparkCore编程 入口是:JavaSparkContext 基本的RDD是:JavaRDD 其他常用RDD: JavaPairRDD JavaRDD和JavaPairRDD转换: ...

  5. 常用工具(Windows版本)

    为原有版本修改为markdown后的更新,这个编辑器真心不错,只需要把原来喜欢的表格改成列表即可. 代码工具 代码管理工具 SourceTree:支持windows和mac跨平台使用的git图形化客户 ...

  6. Java集合&Spring源码浅读

    记录自己现在知道的,以后了解了更多的话,再继续补上来 Java集合类 Collection 接口 说明:是List,set 的父类.定义了集合初始模样.集合只存储对象. Jdk8文档,内部方法定义有: ...

  7. python全栈开发之正则表达式和python的re模块

    正则表达式和python的re模块 python全栈开发,正则表达式,re模块 一 正则表达式 正则表达式(Regular Expression)是一种文本模式,包括普通字符(例如,a 到 z 之间的 ...

  8. j.u.c系列(09)---之并发工具类:CyclicBarrier

    写在前面 CyclicBarrier是一个同步辅助类,允许一组线程互相等待,直到到达某个公共屏障点 (common barrier point).因为该 barrier 在释放等待线程后可以重用,所以 ...

  9. Android学习笔记PreferenceFragment的使用

    相信大家对Perference都比较熟悉了,也就是我们常说的偏好设置,首选项设置,可以保存一些数据,例如我们在上一次使用的时候的一些内容,希望在下一次启动后依然生效,而不需要再进行配置那么麻烦.一般这 ...

  10. WAP 2.0开发XHTML MP语法及常用功能

    XHTML Mobile Profile 的基本结构 <?xml version="1.0" encoding="utf-8"?> <!DOC ...