移动端利用-webkit-box水平垂直居中
首先，必须要在父元素上用display:-webkit-box.
一、box的属性：
1.box-orient 用于父元素，用来确定父容器里子容器的排列方式，是水平还是垂直。
horizontal在水平行中从左向右排列子元素；vertical从上向下垂直排列子元素。
horizontal:
vertical:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webkit-box</title>
<style>
.father{
display: -webkit-box;
-webkit-box-orient:horizontal;
background-color: #f4f4f4;
height: 800px;
}
/*vertical*/
.father{
display: -webkit-box;
-webkit-box-orient:vertical;
background-color: #f4f4f4;
height: 800px;
}
.child1{
background-color: red;
color: #f4f4f4;
font-size: 100px;
}
.child2{
background-color: yellow;
color: green;
font-size: 200px;
}
.child3{
background-color: blue;
color: #f4f4f4;
font-size: 100px;
} </style>
</head>
<body>
<div class="father">
<div class="child1">1</div>
<div class="child2">2</div>
<div class="child3">3</div>
</div>
</body>
</html>
2.box-pack 用于父元素，用来确定父容器里子容器的水平对齐方式。
start水平居左对齐；end水平居右对齐；center水平居中；justify两端对齐。
start:
end:
center:
justify:
.father{
display: -webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack: center;
background-color: #f4f4f4;
height: 800px;
}
3.box-align 用于父元素，用来确定父容器里子容器的垂直对齐方式。
start居顶对齐；end居底对齐；center垂直居中；stretch拉伸到与父容器等高。
start:
end:
center:
stretch:
.father{
display: -webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-align: stretch;
background-color: #f4f4f4;
height: 800px;
}
4.box-flex 用于子元素，用来让子容器针对父容器的宽度按一定规则进行划分。
.father{
display: -webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-align: stretch;
background-color: #f4f4f4;
height: 800px;
}
.child1{
background-color: red;
color: #f4f4f4;
font-size: 100px;
-webkit-box-flex:;
}
.child2{
background-color: yellow;
color: green;
font-size: 200px;
-webkit-box-flex:;
}
.child3{
background-color: blue;
color: #f4f4f4;
font-size: 100px;
-webkit-box-flex:;
}
二、水平垂直居中
.father{
display: -webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
background-color: #f4f4f4;
height: 800px;
}
.child1{
background-color: red;
color: #f4f4f4;
font-size: 100px;
}
.child2{
background-color: yellow;
color: green;
font-size: 200px;
}
.child3{
background-color: blue;
color: #f4f4f4;
font-size: 100px;
}
移动端利用-webkit-box水平垂直居中的更多相关文章
- css3水平垂直居中（不知道宽高同样适用）
css水平垂直居中 第一种方法: 在父div里加: display: table-cell; vertical-align: middle; text-align: center; 内部div设置: ...
- 移动端利用-webkit-box水平垂直居中(旧弹性盒)
新弹性盒水平垂直居中参考:http://www.cnblogs.com/ooo0/p/7562884.html 新旧弹性盒样式参考:http://www.cnblogs.com/ooo0/p/7562 ...
- 移动端css水平垂直居中
水平垂直居中 1.margin 负值调整偏移实现 兼容性: 当前流行的使用方法. <div class="box"> <div class="conte ...
- css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
- CSS实现水平垂直居中的1010种方式
转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...
- 你知道CSS实现水平垂直居中的第10种方式吗？
你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...
- 【前端攻略】最全面的水平垂直居中方案与flexbox布局
最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案.而且在Css3的flexbox出现之后,解决各类居中问题变得更加 ...
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- Flexbox制作CSS布局实现水平垂直居中
Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head> & ...
随机推荐
- asp.net core部署时自定义监听端口，提高部署的灵活性
另一种方式 https://www.cnblogs.com/stulzq/p/9039836.html 代码截图: 贴一下代码,方便复制: //默认端口号5000 string port = &quo ...
- 一次Java内存泄漏调试的有趣经历
人人都会犯错,但一些错误是如此的荒谬,我想不通怎么会有人犯这种错误.更没想到的是,这种事竟发生在了我们身上.当然,这种东西只有事后才能发现真相.接下来,我将讲述一系列最近在我们一个应用上犯过的这种错误 ...
- layer.conifrm 非阻塞执行 ztree删除节点 问题
layer.confirm无法阻塞js执行,导致ztree插件的beforeRemove回调函数未等待用户确定删除便已经移除界面中的节点, 因此可能会出现前后台数据不一致情况,正常逻辑理应删除后台数据 ...
- 一文让你熟练掌握Linux的ncat(nc)命令
一文让你熟练掌握Linux的ncat(nc)命令 ncat 或者说 nc 是一款功能类似 cat 的工具,但是是用于网络的.它是一款拥有多种功能的 CLI 工具,可以用来在网络上读.写以及重定向数据. ...
- Microsoft Office软件自定义安装目录
Microsoft Office安装时不能手动设置安装目录,本文描述通过修改注册表的方式自定义安装目录 1.同时按下快捷键 win + r 启动运行 2.输入 regedit 打开注册表 3.找到 ...
- NSCache的简单使用
简介 1)NSCache 是苹果官方提供的缓存类,用法与 NSMutableDictionary 的用法很相似,在 AFNetworking 和 SDWebImage 中,使用它来管理缓存. 2)NS ...
- Eddy's mistakes HDU
链接 [http://acm.hdu.edu.cn/showproblem.php?pid=1161] 题意 把字符串中大写字母变为小写 . 分析 主要是含有空格的字符串如何读入,用getline(c ...
- 2016.3.30 OneZero站立会议
会议时间:2016年3月30日 13:00~13:20 会议成员:冉华,张敏,王巍,夏一鸣. 会议目的:汇报前一天工作,全体成员评论,确定会议内容或分配下一步任务. 会议内容: 1.汇报头一天工作情 ...
- Linux实践：ELF文件格式分析
标签(空格分隔): 20135321余佳源 一.基础知识 ELF全称Executable and Linkable Format,可执行连接格式,ELF格式的文件用于存储Linux程序.ELF文件(目 ...
- linux内核设计第七周——可执行程序的装载