移动端利用-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> & ...
随机推荐
- [SHOI2008]cactus仙人掌图[圆方树+树dp]
题意 求仙人掌的直径(相距最远的两个点的距离). \(n\le 5\times 10^4\) 分析 建立圆方树,讨论答案路径的 lca 在圆点还是方点. 利用树形 dp 求出每个圆点到 不同子树内圆 ...
- InnoDB 文件系统
1. 操作系统文件系统inode 2. InnoDB的存储结构 2.1Innodb inode page 参考 http://mysql.taobao.org/monthly/2016/02/01/ ...
- HBase最佳实践-管好你的操作系统
本文由 网易云发布. 作者:范欣欣 本篇文章仅限本站分享,如需转载,请联系网易获取授权. 操作系统这个话题其实很早就想拿出来和大家分享,拖到现在一方面是因为对其中各种理论理解并不十分透彻,怕讲不好: ...
- Express4.x API (三)：Response (译)
Express4.x API 译文 系列文章 Express4.x API (一):application (译) -- 完成 Express4.x API (二):request (译) -- 完成 ...
- 基于DDD的.NET开发框架ABP实例，多租户 (Saas)应用程序，采用.NET MVC, Angularjs, EntityFramework-介绍
介绍 基于ABPZERO的多租户 (Saas)应用程序,采用ASP.NET MVC, Angularjs-介绍 ASP.NET Boilerplate作为应用程序框架. ASP.NET MVC和ASP ...
- NFS共享文件系统部署
1. 概述 本篇博客主要是介绍如何安装和使用NFS服务. 2. 安装软件包 首先确认系统是否已经安装相应的软件包,执行命:rpm -qa | egrep "rpcbind|nfs-utils ...
- if...else 小练习
# 需求:猜年龄,可以让用户最多猜三次 age = 60 for i in range(3): guess = int(input("Input Age: ")) if guess ...
- Linux下FTP环境部署梳理（vsftpd和proftpd）
在日常运维工作中,常部署到的FTP是vsftpd和proftd.之前写了Linux下FTP虚拟账号环境部署总结,下面简单说下本地用户下的FTP环境部署过程: 简单梳理下FTP主动和被动两种工作模式: ...
- Echo团队便利记事本项目终审报告
一.团队成员简介 http://www.cnblogs.com/echo-buaa/p/3991968.html 二.团队项目的目标,预期的典型用户,预期的功能描述,预期的用户数量在哪里? 项目的目标 ...
- BugPhobia开发篇章：Beta阶段第IX次Scrum Meeting
0x01 :Scrum Meeting基本摘要 Beta阶段第九次Scrum Meeting 敏捷开发起始时间 2015/12/25 00:00 A.M. 敏捷开发终止时间 2015/12/28 23 ...