频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
css居中对齐的几种方法实例分享
2018-09-29 10:37:36      个评论      
收藏   我要投稿

css居中对齐的几种方法

css居中对齐的几种方法

弹性盒子position:absolutefixed+margin:auto弹性盒子与其他传统的对比:

弹性盒子

设置弹性容器的
主轴对齐属性:justify-content:center
交叉轴的对其属性:align-items:center

.perent{
		 	position: absolute;
			display: flex;
			display: -webkit-flex;
		            width: 500px;
		            height:500px;
		            justify-content: center;
		            align-items: center;
		            background: green;
		            flex-direction: row-reverse; 
		            flex-wrap: wrap;
		            justify-content: center;
		            align-items: center;
		}
		.left,.right{

		           flex:1 1 200px;
		           width: 100px;
		           height: 100px;
		           background: red;
		}
		.middle{
			flex-grow: 1;
			height: 100px;
			background: blue;
		} 

position:absolute

设置父元素position:absolute或者relative;
设置该元素:position:absolute;
left:50%;
right:50%;
margin-left:-该元素的边长0.5倍
margin-top:-该元素的边长0.5倍

.con{
			position: absolute;
			width: 200px;
			height: 200px;
			bottom: 0;
			background: green;
		}
		.middle{
			width: 100px;
			height: 100px;
			background: blue;
			position: absolute;
			left:50%;
			top:50%;
			margin-left: -50px;
			margin-top: -50px; 
		} 

fixed+margin:auto

设置要对齐的元素的
position:fixed;
left:0;
right:0;
top:0;
bottom: 0;
margin: auto;

.middle{
			/*flex-grow: 1;*/
			width: 100px;
			height: 100px;
			background: blue;
			position: fixed;
			left:0;
			right:0;
			top:0;
			bottom: 0;
			margin: auto;
			} 

弹性盒子与其他传统的对比:

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

点击复制链接 与好友分享!回本站首页
上一篇:弹出层layer!!!基础解析
下一篇:前端自动生成ChangeLog的设计与实现
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站