当前位置： 移动技术网 > IT编程>网页制作>CSS > css居中对齐的几种方法实例分享

css居中对齐的几种方法实例分享

2018年10月03日  | 移动技术网IT编程  | 我要评论

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

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

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网