移动端利用-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: 1;}.child2{background-color: yellow;color: green;font-size: 200px;-webkit-box-flex: 2;}.child3{background-color: blue;color: #f4f4f4;font-size: 100px;-webkit-box-flex: 3;}

二、水平垂直居中

.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;}

转载于:https://www.cnblogs.com/mywaystrech/p/4849260.html

移动端利用-webkit-box水平垂直居中相关推荐

div+css实现水平/垂直/水平垂直居中超详解
目录一.水平居中 1.块级元素水平居中方法一:设置margin:0 auto 方法二:设置flex布局方法三:设置css3的transform 2.行内元素水平居中行内元素在块级元素中水平居中 ...
CSS布局对齐方式--水平居中、垂直居中、水平垂直居中
前言:在网页布局中,经常遇到需要使元素居中对齐的时候,居中对齐的方式有:水平居中.垂直居中和水平垂直居中.这次,借此回顾总结一下,并在此记录下相关内容. 一.水平居中: (1)行内元素的水平居中 ...
HTML5/CSS3基础——div盒子水平垂直居中的三种方案
HTML5/CSS3基础--div盒子水平垂直居中的三种方案一.基于定位的使div盒子水平居中的三种方式 1.使用top:50% left:50% 以及margin-top 和 margin-lef ...
移动端实现水平垂直居中的整个页面loading层
移动端实现水平垂直居中的整个页面loading层,因为是移动端,所以采用flex布局,目前来说,基本上手机浏览器和微信浏览器都对flex支持良好了,这个水平垂直居中实现方法放到微信小程序中一样可以.采 ...
css居中怎么移动,移动端css水平垂直居中
水平垂直居中 1.margin 负值调整偏移实现兼容性: 当前流行的使用方法. .box{ width: 100%; height: 100%; } .content{ position: abso ...
利用flex实现元素水平垂直居中
首先介绍一下flex布局. 采用Flex布局的元素,称为Flex容器(flex container),简称"容器".它的所有子元素自动成为容器成员,成为flex项目(flex it ...
html div 水平垂直居中显示,利用CSS实现div水平垂直居中
实现居中的方案有很多,这里介绍下纯CSS使用absolute配合margin的方案. 1. p宽高固定width: 400px; height: 200px; position: absolute; ...
vue+elementui系统利用Export2Excel.js将表格内容导出到excel，并设置表头文字水平垂直居中
写在前面:这是纯前端导出,导出的表格是二级表头,内容是四级单元格(单元格内有四小格),这几个点学会之后应该能适应大部分导出excel的需求了.本次功能记录真实有效.对于之前没接触过导出excel需求的 ...
你知道CSS实现水平垂直居中的第10种方式吗？
你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...

移动端利用-webkit-box水平垂直居中

移动端利用-webkit-box水平垂直居中相关推荐

最新文章

热门文章