几种元素居中的方法

有几种css样式居中的方法今天来总结一下:

1.有宽度的div

方法1:

.contain{
width:100px;
display:block(这一步很重要。如果元素是行内元素这里需要转换一下);
margin:o auto;
}
方法2:
.contain{
width:100px;
position:absolute;
left:50%;
margin-left:-50px;
}

方法3:

.contain{
width:100px;
display:inline-block;
text-align:center;
}

方法4:

.contain{
width:100px;
position:absolute;
left:0;
right:0;
margin:auto;
}

方法5:

.contain{
width:100px;
position:absolute;
left:50%;
transformX:translate(-50%);
}

方法6:CSS3 Flex实现元素的水平居中和垂直居中

1.单个元素水平居中

.contain{ 
display: flex;
justify-content:center;
}

2.多个h1元素水平居中

	<div class="box">
	    <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
	    <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
	    <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
	</div>
	.box{
	    display: flex;
	    justify-content:center;
	    width:100%;
	    background:#0099cc}


3:多个h1标签并排垂直居中

<div class="box">
	    <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
	    <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
	    <h1>flex弹性布局justify-content属性实现元素水平居中</h1>
</div>
	.box{
	    display: flex;
	    width:980px;
	    height:30rem;
	    align-items:center;
	    background:#0099cc
	}
	h1{
	    font-size:1rem;
	    padding:1rem;
	    border:1px dashed#FFF;
	    color:#FFF}


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33718246/article/details/80318298
个人分类: 前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭