实现水平居中、垂直居中

1.水平居中

　　首先，对于行内元素来讲，text-align:center即可实现水平居中；

　　对于块级元素来讲，如果不设置行内元素的宽度，一般情况下它是独占一行的，这种情况下是不用考虑水平居中的。所以对于块级元素讲水平居中的时候，一般是其宽度值被设置了。如果要实现一个块级元素的水平居中， margin：0 auto  即可。

　　而如果要实现多个块级元素在一行的水平居中，可以为它们的父类设置text-align：center，让块级元素以inline-block的形式存在。

.body-div{
    text-align: center;
}
.item{

    display: inline-block;
}
<body>
    <div class="body-div">
        <div class="item">Box-1</div>
        <div class="item">Box-2</div>        
    </div>
</body>

2.水平+垂直居中　　

　　1）绝对定位;

.body-div{
	position: relative;
	height: 600px;
}
.item{
	position: absolute;
	width: 200px;
	height: 100px;
	top: 50%;
	left: 50%;
	margin-top: -50px;
	margin-left: -100px;
}

　　2）flex(伸缩盒)

.body-div{
	display: flex;
	justify-content: center; /*容器内的元素将会居中*/
	align-items: center;
}

 

posted @ 2016-05-05 19:45  往事随风1993  阅读(108)  评论(0)    收藏  举报