原文链接](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. CSS------如何让大小不一样的div顶部对齐

    方法一:(推荐) <div style="float:left;margin-right:20px"> <img src="/source/s_1701 ...

  2. shiro xml标准配置

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  3. 007.Zabbix监控图形绘制

    一 Graphs配置 1.1 新建图形 Graphs是将数据展示为图像,以视觉化形式展示,Graphs的配置保存在主机和模板中. Configuration---->Hosts---->G ...

  4. Oracle - 数据库巡检脚本

    分享一个oracle数据库巡检脚本,欢迎大家使用,希望大家在用的过程中发现脚本中的错误并提出改进意见. -- 数据库巡检脚本 -- 版本号2.1 -- 该脚本仅对数据库的做一个初步的巡检,具体的优化方 ...

  5. JedisConnectionException: java.net.ConnectException: Connection refused

    出现问题 我遇到的一个问题,在连接redis的时候出现了错误!错误如下: JedisConnectionException: java.net.ConnectException: Connection ...

  6. 最牛逼的任务调度工具 | Quartz

    Quartz 是一个完全由 Java 编写的开源作业调度框架,不要让作业调度这个术语吓着你,其实不难.尽管 Quartz 框架整合了许多额外功能,但就我们使用来说,你会发现它易用得简直让人受不了! 简 ...

  7. Android-Start方式和Bind方式混合开启Service

    Android-Start方式和Bind方式混合开启Service 需求如下 需要开发一个音乐APP,需要满足以下的需求: 当退出所有的Activity后仍然能够播放音乐 能够控制音乐的播放比如说,暂 ...

  8. ArduinoYun教程之Arduino编程环境搭建

    ArduinoYun教程之Arduino编程环境搭建 Arduino编程环境搭建 通常,我们所说的Arduino一般是指我们可以实实在在看到的一块开发板,他可以是Arduino UNO.Arduino ...

  9. linux驱动之LCD(无framebuffer)

    <简介> a:什么是液晶 物质一般有三态,固态,气态,和液态.这只是一种比较大致的划分,但是有些物质介于液体和固体之间——液晶.一般固体的分子或原子都由固定的排列方式,但是液晶介于固体和液 ...

  10. luogu P1663 山

    题目链接 luogu P1663 山 题解 只需要求出下凸包的最低点就好了 显然是由两个斜率相反的直线相交来的 盼下最低点为直线的情况 代码 #include<cstdio> #inclu ...