移动端利用-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> & ...
随机推荐
- 【知识整理】这可能是最好的RxJava 2.x 入门教程（一）
一.前言 这可能是最好的RxJava 2.x入门教程系列专栏 文章链接: 这可能是最好的RxJava 2.x 入门教程(完结版)[强力推荐] 这可能是最好的RxJava 2.x 入门教程(一) 这可能 ...
- Quartz_配置
quartz_jobs.xml job 任务 其实就是1.x版本中的<job-detail>,这个节点是用来定义每个具体的任务的,多个任务请创建多个job节点即可 name(必填) 任务名 ...
- Linux mount 命令进阶
笔者在<Linux mount 命令>一文中介绍了 mount 命令的基本用法,本文我们接着介绍 mount 命令的一些高级用法,比如 bind mounts(绑定挂载)和 shared ...
- Supervisor (进程管理利器) 使用说明 - 运维笔记
一.Supervisor简单介绍supervisor是一个 Client/Server模式的系统,允许用户在类unix操作系统上监视和控制多个进程,或者可以说是多个程序.supervisor与laun ...
- 分布式监控系统Zabbix--完整安装记录 -添加apache监控
前面介绍了zabbix3.0.3环境及相关监控项的添加,下面介绍下针对apache的监控配置:1)在apache配置文件中打开server-status状态访问功能(自带的) [root@IDC-Ad ...
- shell脚本之特殊符号总结性梳理
# 井号 (comments) 这几乎是个满场都有的符号#!/bin/bash 井号也常出现在一行的开头,或者位于完整指令之后,这类情况表示符号后面的是注解文字,不会被执行. # This line ...
- BugPhobia开发篇章：Beta阶段第IX次Scrum Meeting
0x01 :Scrum Meeting基本摘要 Beta阶段第九次Scrum Meeting 敏捷开发起始时间 2015/12/25 00:00 A.M. 敏捷开发终止时间 2015/12/28 23 ...
- react-native 基础知识的学习
react已经用了半年多了,年后有时间想探究一下奇妙的react-native,还别说确实刁,具体哪里刁后面会补充,因为搭建教程,以及入门教程没来得及写,这里先来写一些基础知识的心得. 为什么reac ...
- 小学生四则运算APP核心代码公布
Mainactivity类: package com.example.XXSCYS; import java.io.ByteArrayOutputStream; import java.io.File ...
- pandas获取groupby分组里最大值所在的行,获取第一个等操作
pandas获取groupby分组里最大值所在的行 10/May 2016 python pandas pandas获取groupby分组里最大值所在的行 如下面这个DataFrame,按照Mt分组, ...