移动端利用-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基于Cookie实现同域单点登录(SSO)
在同一个域名下有很多子系统 如:a.giant.com b.giant.com c.giant.com等 但是这些系统都是giant.com这个子域. 这样的情况就可以在不引用其它框架的情况下, ...
- 懒人小工具：T4生成实体类Model,Insert,Select,Delete以及导出Excel的方法
由于最近公司在用webform开发ERP,用到大量重复机械的代码,之前写了篇文章,懒人小工具:自动生成Model,Insert,Select,Delete以及导出Excel的方法,但是有人觉得这种方法 ...
- MySQL主主同步配置
1. MySQL主主配置过程 在上一篇实现了主从同步的基础上,进行主主同步的配置. 这里用node19(主),node20(从)做修改,使得node19和node20变为主主同步配置模式 修改配置文件 ...
- c#基础系列1---深入理解值类型和引用类型
"大菜":源于自己刚踏入猿途混沌拾起,自我感觉不是一般的菜,因而得名"大菜",于自身共勉. 不知不觉已经踏入坑已10余年之多,对于c#多多少少有一点自己的认识, ...
- sudo 与输出重定向
本文介绍如何使用 sudo 将输出重定向到当前用户没有权限的文件.注意:本文中 demo 的演示环境为 ubuntu 18.04. Permission denied 问题 如果当前用户没有某个文件的 ...
- js格式化时间
转自:https://blog.csdn.net/u010964869/article/details/51095827 显示格式为:yyyy-mm-dd hh:mi:ss function form ...
- C#【结对编程作业】小学数学习题助手
一.软件成品展示 软件本体下载(包括程序及其更新日志,源码工程包,UML图,API接口文档,算法介绍文档,算式计算excel实例,浅查重程序) 链接: http://pan.baidu.com/s/1 ...
- 实验三 Java敏捷开发与xp实现
实验内容: 1. XP基础 2. XP核心实践 3. 相关工具 实验要求 1.没有Linux基础的同学建议先学习<Linux基础入门(新版)><Vim编辑器> 课程 2.完成实 ...
- 小学生四则运算APP核心代码公布
Mainactivity类: package com.example.XXSCYS; import java.io.ByteArrayOutputStream; import java.io.File ...
- PAT 1014 福尔摩斯的约会
https://pintia.cn/problem-sets/994805260223102976/problems/994805308755394560 大侦探福尔摩斯接到一张奇怪的字条:“我们约会 ...