<!-- html结构 -->
<body>
<div class="wrap">
    <div class="box"></div>
</div>
</body>

/* css样式 */

/* (1) 模仿单行文字居中的方式 */
.wrap {
width: 200px;
height: 80px;
line-height: 80px;
}

.box {
display: inline-block;
vertical-align:middle;
}

/* (2) 已知宽高，通过position:absolute; */
.wrap {
width: 200px;
height: 200px;
position: relative;
}

.box {
width: 100px;
height: 80px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -40px;
}

/* (3) 未知宽高，通过css3属性 transfrom */
.wrap {
width: 200px;
height: 200px;
position: relative;
}

.box {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

/* (4) 通过flex布局 */
<!-- html结构 -->
<body>
<div class="wrap flexbox flexbox-center flexbox-middle">
    <div class="box"></div>
</div>
</body>

/* css样式 */

.flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}

/* 水平居中 */
.flexbox-center {
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}

/* 垂直居中 */
.flexbox-middle {
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

CSS垂直居中技巧的更多相关文章

  1. css 垂直居中技巧

    CSS垂直居中技巧,我只会23个,你会几个?自古以来(是有多?~),网页CSS的垂直居中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈的研究后,据说CSS的垂直居中技巧已达到近十 ...

  2. 提高你css技能的css开发技巧(转载)

    一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例效果如下图 (鼠标移到左下角白色区域,往右侧拖动,实现 ...

  3. css兼容技巧

    CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middl ...

  4. 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  5. IE和Firefox浏览器CSS兼容性技巧整理

    转自:http://homepage.yesky.com/185/11484185all.shtml#p11484185 CSS兼容常用技巧(1) 更多精彩相关文章推荐: 各大浏览器 CSS3 和 H ...

  6. div+css 布局技巧总计

    一.css 样式 1.float 首先需要了解块级元素(block element).每个块级元素都默认占用一行,在同一行只能添加一个块元素(float 除外).块级元素一般可以嵌套块级元素或者行内元 ...

  7. 高手总结CSS书写技巧

    这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果.这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack ...

  8. 提高你css技能的css开发技巧

    好久没整理博客了 进来啰嗦两句   继续抄别人的博客 一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例 ...

  9. css小技巧（1）

    1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...

随机推荐

  1. 自动化测试工具selenium的使用

    1.自动化测试的前提

  2. 用Composer获取第三方资源总是失败咋办？

    凉拌!!! 不不不,哥可是一个有追求的人,没那么容易放弃的! 所以我选择用中国全量镜像,https://pkg.phpcomposer.com/ 使用方法: 对,就是命令行方法,我最喜欢的方法!!! ...

  3. 02 浅析Spring的AOP（面向切面编程）

    1.关于AOP AOP(Aspect Oriented Programming),即面向切面编程,可以说是OOP(Object Oriented Programming,面向对象编程)的补充和完善.O ...

  4. hdu1394 分治 or 线段树

    利用分治求一次逆序数,然后每次把第一个元素放到末尾,设该交换元素的值为x,设上一次求得的逆序数为y,那么此时的逆序数等于y - x + (n - x - 1),减去x是因为x作为第一个元素,其后共有x ...

  5. BZOJ2820 - 巧克力王国

    原题链接 Description 给出个二维平面上的点,第个点为,权值为.接下来次询问,给出,求所有满足的点的权值和. Solution 对于这个点建一棵k-d树,子树维护一个子树和. 如果子树所代表 ...

  6. java.net.UnknownHostException

    java.net.UnknownHostException 错误解决方向 查看 测试真机或者模拟机是否连上了网络.     如果不是第一步错误的话,一般就是测试机没有链接上网络,可以打开个网页或者其他 ...

  7. 情景linux--如何优雅地退出telnet

    情景linux--在脚本中如何优雅地退出telnet 情景 telnet命令是TELNET协议的用户接口,它支持两种模式:命令模式和会话模式.虽然telnet支持许多命令,但大部分情况下,我们只是使用 ...

  8. Docker系列二：Docker的基本结构

    Docker的基本结构 Docker 的三大基础组件 Docker有三个重要的概念:仓库 , 镜像 和 容器 ,它们是Docker的三大基出组件 Docker的组织结构 Docker处于操作系统和虚拟 ...

  9. 科普 TLS 1.3—新特性与开启方式

    TLS 1.3 协议针对安全强化及效率提升等方面进行了大量修改,相继推出 20 多个草案版本,即将完成最终的标准化.标准完成后,OpenSSL 组织将推出 OpenSSL 1.1.1 版本,对 TLS ...

  10. 转：彻底搞清referrer和origin

    在http协议中有这两个字段,之前一直隐隐约约的觉得是,一种标记请求来源的方法(的确是),但是更细致的对这两个字段的比较却没有一个清楚的认识. referrer 到底是referer还是referre ...