移动端利用-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> & ...
随机推荐
- 阿里云centos内docker的搭建
由于docker在17之后的版本分成了docker EE(企业版)和docker CE(社区版),那么我们在安装的时候就要开始纠结的选择了,这里我推荐了docker CE(社区版). 实际上这两个版本 ...
- 使用阿里云cli管理安全组
相比于python SDK方式,阿里云基于GO SDK开发了一整套CLI工具,可以通过调用RPC API来管理云资源,对编程能力不够的人来说是个福音. 而且,阿里云CLI的文档比SDK的文档更加全面, ...
- Centos下安装破解Jira7的操作记录
Jira是一个集项目计划.任务分配.需求管理.错误跟踪于一体的工具,可以作为一个bug管理系统,可以将在测试过程中所发现的bug录入.分配给开发人员.前面介绍了Confluence在Centos下的安 ...
- 补充照片：某基同学使用Bing词典
某基同学使用Bing词典的照片
- BugPhobia终章篇章：学霸在线系统Beta阶段展示
0x00 :序言 1 universe, 9 planets, 204 countries,809 islands, 7 seas, and i had the privilege to meet y ...
- [2019BUAA软件工程]结对编程感想
结对编程感想 写在前面 本博客为笔者在完成软件工程结对编程任务后对于编程过程.最终得分的一些感想与经验分享.此外笔者还对于本课程的结对编程部分提出了一些建议. Tips Link 作业要求博客 2 ...
- 20135316Linux内核学习笔记第八周
20135316王剑桥<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC 1000029000 一.进程调度与进程调度的时机分析 ...
- 【转】STM32和ARM的区别
转自:http://www.cnblogs.com/nuc-boy/archive/2012/09/11/2680157.html 这个问题大概2009年的时候很多人就在问,请看09年的时候大家给出的 ...
- Jenkins Jfrog Artifactory 以及docker下的pipeline 容器编排实践
1. 测试环境情况: Docker主机 10.24.101.99 JFrog Artifactory 主机 (admin password) jenkinx github原始地址:https://gi ...
- Angular injector注入器
<!DOCTYPE html><html ng-app="myApp"><head lang="en"> <meta ...