【CSS3】水平垂直居中 -webkit-box

最新推荐文章于 2023-08-05 10:29:34 发布
最新推荐文章于 2023-08-05 10:29:34 发布
阅读量2.8k 收藏 3
点赞数
分类专栏： CSS 文章标签： CSS CSS3 水平垂直居中 -webkit-box displaybox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BIG_LEE_SHOW/article/details/79246182
版权
我把干货都放在了代码里，说明全在注释上，希望可以帮到有需要的人。 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		html,body{
			width: 100%;
			height:100%;
		}
		/*理解-webkit-box-flex的用法*/
		.parent1{
			/*首先定义父元素display:-webkit-box; 这个属性必须给父元素，所有的属性都是用来控制子元素的*/
			display: -webkit-box;				
    		-webkit-box-pack: center;				/*让元素水平居中，还有其他属性，官方文档有解释*/
   		 	-webkit-box-align: center;				/*让元素垂直居中，包含其他属性，官方文档有解释*/
    		margin: 0 auto;
    		width: 100%;
    		height: 100%;
		}
		.child1{
			display: -webkit-box;
    		-webkit-box-pack: center;				
   		 	-webkit-box-align: center;				
			background-color: red;
			-webkit-box-flex:1;						
			/*box-flex里面可以添加任意数字包括小数，可以让整个子元素针对父元素的宽度按百分比例进行划分*/
		}
		.child2{
			display: -webkit-box;
    		-webkit-box-pack: center;
   		 	-webkit-box-align: center;
			background-c
最低0.47元/天 解锁文章
BIG_LEE_SHOW
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css3中的display：-webkit-box的用法
csdn_chenli
10-27 7万+
css3中的display：-webkit-box的用法 webkit-box 1.之前要实现横列的web布局，通常就是float或者display:inline-block;但是都不能做到真正的流体布局。至少width要自己去算百分比。 2.flexiblebox就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。 3.box-flex是css3新添加的盒子模型
css3设置box-pack和box-align让div里面的元素垂直居中
09-25
要在CSS3中实现垂直居中，可以将`box-pack`和`box-align`都设置为`center`，这样子元素会在容器中居中对齐。以下是一个例子： ```css #container { display: -webkit-box; /* Webkit */ display: -moz-box; /* ...
display:-webkit-box
weixin_30681615的博客
06-26 804
Flexbox 为 display 属性赋予了一个新的值（即 box 值）, flexbox的属性有很多，记录一些比较常用的属性： 用于父元素的样式： display: box; 该属性会将此元素及其直系子代加入弹性框模型中。（Flexbox 模型只适用于直系子代） box-orient:horizontal|vertical|inherit; 该属性定义父元素的子元素...
自适应布局webkit-box的用法
m0_72200584的博客
02-01 1602
自适应布局webkit-box的用法
css3中webkit-box
十三狼的专栏
06-25 759
1、之前要实现横列的web布局，通常就是float或者display：inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。 2.flexible box 就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。 提供的关于盒模型的几个属性： box-orient           子元素排列 vertical or horizon
使用 CSS 和 WebKit 属性设置 HTML5 `＜audio＞` 标签的样式
我的博客，不一样的自我表达
08-05 2740
虽然标签本身不提供特定的 WebKit 样式属性，但您可以利用标准 CSS 以及特定于 WebKit 的属性来自定义音频播放器的外观，以符合您的设计美学。总之，虽然 HTML5标签不提供专用的 WebKit 样式属性，但您可以使用标准 CSS 以及各种特定于 WebKit 的选择器为音频播放器实现自定义且精美的外观。尝试不同的样式和属性来创建与您的网站设计无缝集成的音频播放器。-webkit-media-controls-volume-slider-container：设置音量滑块容器的样式。
-webkit-box之 pack与align
04-30 1213
-webkit-box-pack 取值：start | center | end | justify box-pack受-webkit-box-orient的影响，默认情况下（即box-orient设置为horizontal）start和end所呈现的效果等同于左对齐和右对齐；当box-orient设置为vertical时，start和end所呈现的效果等同于顶部对齐和底部对齐； cen
Flexbox制作CSS布局实现水平垂直居中的简单实例
12-13
Flexbox实现一个div元素在body页面中水平垂直居中： ... <!... <...Flexbox制作CSS布局实现水平垂直居中</title>  <style type="text/css">  html { height: 100%; }  body
利用CSS3的flexbox实现水平垂直居中与三列等高布局
01-19
因为对于三列等高自适应布局和水平垂直居中对齐需要一些对css3中flexbox基础概念的理解，所以会对flexbox的概念做一个简单的介绍，以为后面的实例做一个铺垫。本人一直认为，不管学习任何知识，对于概念的理解都十分...
盒子模型:display:-webkit-box的使用
yushang的博客
04-15 7175
在移动布局中浮动已经不再重要,自适应成为主要的需求,所以display:-webkit-box;变的尤为重要. box-flex是css3新添加的盒子模型属性,实现布局的垂直登高/水平均分/按比例划分.兼容性有待提高,没有得到完全支持,可以使用它们的私有属性定义Firefox(-moz)/opera(-o)/chrome/safari(-webkit） 一、box-flex属性 box-fl...
固定行数文字垂直居中与不固定行数文字垂直居中
qq_43379179的博客
05-24 362
固定行数文字垂直居中与不固定行数文字垂直居中 今天碰到一个固定固定行数文字垂直居中展示的问题，学到一个新的css属性-webkit-line-clamp。 -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -...
-webkit-box-flex 属性 组件长/宽偏差
qq_38321137的博客
11-26 1586
背景：有四个表格，按照田字排列，长宽五五开。同时，有两个表格可能会随着配置项不显示，这个时候，旁边的表格就要填满不显示的表格所在的空白，所以表格的长或宽就要自适应了，就要用到==-webkit-box-flex==属性了。如图。 1、2、3、4四个表格，按需求应该是等高的。实际1、3等宽，比2、4要稍宽，这个是需要，暂且不管。 问题是，2、4等高，但1比3高几个像素。本来几个像素区别不大，但是旁边2、4等宽，一眼就看出参差不齐 这几个表格是这么布局的。在总div里横向排序两个div,两个div不等宽，这两
WEBKIT中的HTML词法解析
一天 一小步
07-16 709
原帖地址 ： http://www.cnblogs.com/qq499194341/articles/2891745.html
css3中属性前缀（-moz、-ms、-webkit、-o-）
热门推荐
瘦瘦瘦大人的博客
06-24 2万+
1、-moz-代表firefox浏览器私有属性2、-ms-代表ie浏览器私有属性3、-webkit-代表safari、chrome私有属性4、-o-代表Opera这些是为了兼容老版本的写法，比较新版本的浏览器都支持直接写：border-radius。Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。Firefox、Chrome 以及 Saf...
css3中webkit-box的用法
巴黎的妖
02-15 461
1、之前要实现横列的web布局，通常就是float或者display：inline-block; 但是都不能做到真正的流体布局。至少width要自己去算百分比。 2.flexible box 就可以实现真正意义上的流体布局。只要给出相应属性，浏览器会帮我们做额外的计算。 提供的关于盒模型的几个属性： box-orient           子元素排列 vertical
如何解决CSS中-webkit-box-orient: vertical属性编译后丢失问题
Anony_me的博客
06-15 3326
一、起因需求要求展示两行，多余的文字用三个点替代，于是用了这几个不太规范的属性 后来发现代码里写的好好的，一到页面上居然没有反应，和没写一个样，f12看了下，原来是这个属性丢失，导致了不生效，在Styles里把这个属性加上就好了，于是断定是编译过程导致这个属性丢失。二、解决办法网上找了一个可行的解决方案，把autoprefixer关掉，有一种写法： 这样确实解决了编译丢失的情况，但会在编译过程中报warning，最后到GitHub上找到最佳解决方案,如下 问题解决，也不报warning了。...
CSS -webkit-box-orient: vertical 属性编译后丢失问题详解
BIlly Feng的博客
05-17 254
最近在项目中，遇到一个属性的打包的问题，在本地看没有问题，在线上是有问题的。在网上看到有3个解决方案，参考链接是https://blog.csdn.net/weixin_41544124/article/details/92646582 以上说的3个解决方案中，只有第二种的解决方法才有效果，那就是在行内样式-写 <span class="item_topic" style="-webkit-box-orient: vertical;">{{item.goodsName}}</span&
webkit 学习笔记 - 2. HTML 网页和结构
AnitaSun的博客
12-03 314
网页结构 框结构 框结构用来对网页的布局进行分割，将网页分成几个框，例如 frameset，frame，iframe 等元素都会形成新的框。每一个框结构包含一个 HTML 文档，最简单的框结构网页就是单一的框，当然，一个网页中也可以有多个框。 层次结构 网页的层次结构是指网页中的元素可能分布在不同的层次中，也就是说某些元素可能不同于它的父元素所在的层，因为某些原因，Webkit 需要为该元素和它的子女建立一个新层 Webkit 的网页渲染过程 在网页中，我们把当前可见的区域称之为视图 Webk
-webkit-box
最新发布
09-01
1. -webkit-box-orient: 用于设置容器内子元素的排列方向，可以是水平方向（row）或垂直方向（column）。 2. -webkit-box-direction: 用于设置容器内子元素的排列顺序，可以是正常顺序（normal）或反向顺序...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值