CSS垂直居中技巧
<!-- 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垂直居中技巧的更多相关文章
- css 垂直居中技巧
CSS垂直居中技巧,我只会23个,你会几个?自古以来(是有多?~),网页CSS的垂直居中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈的研究后,据说CSS的垂直居中技巧已达到近十 ...
- 提高你css技能的css开发技巧(转载)
一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例效果如下图 (鼠标移到左下角白色区域,往右侧拖动,实现 ...
- css兼容技巧
CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middl ...
- 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- IE和Firefox浏览器CSS兼容性技巧整理
转自:http://homepage.yesky.com/185/11484185all.shtml#p11484185 CSS兼容常用技巧(1) 更多精彩相关文章推荐: 各大浏览器 CSS3 和 H ...
- div+css 布局技巧总计
一.css 样式 1.float 首先需要了解块级元素(block element).每个块级元素都默认占用一行,在同一行只能添加一个块元素(float 除外).块级元素一般可以嵌套块级元素或者行内元 ...
- 高手总结CSS书写技巧
这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果.这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack ...
- 提高你css技能的css开发技巧
好久没整理博客了 进来啰嗦两句 继续抄别人的博客 一.resize实现图片对比 resize的语法如下: resize:none | both | horizontal | vertical 案例 ...
- css小技巧（1）
1.-webkit-overflow-scrolling: touch; 解决ios滑动时无缓冲问题 2.::-webkit-scrollbar 设置ios滑动时是否显示滚动条 3.::selecti ...
随机推荐
- NDK 开发中，各种指令集的坑，arm64
最近在NDK开发中遇到了一个奇怪的问题,希望记录下,可以帮到大家: 我编译了一些 .so 动态库,只编译了armeabi-v7a.armeabi 指令集,其它指令集编译不了 ...
- Yii2按需加载图片怎么做？
按需加载图片应该用 jQuery LazyLoad 图片延迟加载按需加载文件夹应该用 Yii::import
- CentOS7上LNMP安装包一步搭建LNMP环境
系统需求: CentOS/RHEL/Fedora/Debian/Ubuntu/Raspbian Linux系统 需要5GB以上硬盘剩余空间 需要128MB以上内存(如果为128MB的小内存VPS,Xe ...
- MySQL的InnoDB引擎与MyISAM引擎
MyISAM:这个是默认类型,它是基于传统的ISAM类型,ISAM是Indexed Sequential Access Method (有索引的顺序访问方法) 的缩写,它是存储记录和文件的标准方法.与 ...
- Zend Framework在windows下的安装
1:首先需要下载安装PHP的依赖管理工具Composer 详情去http://docs.phpcomposer.com/了解 下载链接: https://getcomposer.org/downloa ...
- RegexKitLite编译报错
报错如下: Undefined symbols for architecture i386: "_uregex_open", referenced from: _rkl_getC ...
- 2018/3/2晚11点30分写的程序(C++)
程序目标:输入一个字符串,竖向输出该字符串.使用string和动态分配内存机制.代码如下: #include<iostream>#include "stdafx.h"# ...
- 如何使用 VS2015 进行远程调试？
VisualStudio\Microsoft Visual Studio 14.0\Common7\IDE\Remote Debugger 直接复制 Remote Debugger 文件,里面包含了 ...
- EmguCV创建/保存图片
Image图片类 public Image(Bitmap bmp);//采用 Bitmap 图像创建. public Image(string fileName);//指定路径创建图像. public ...
- 《Android进阶之光》--Android新特性
Android 5.0新特性 1)全新的Material Design设计风格 2)支持多种设备 3)全新的通知中心设计--按照优先级显示 4)支持64位ART虚拟机 5)多任务视窗Overview ...