1、定位法【position:absolute】
如果子级div有定义宽和高的话就可以用这个方法。注意：margin-top,和margin-left的值均为高和宽值的一半。
<style>
div{
position: absolute;/* 或者使用fixed */
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
width: 300px;
height: 200px;
background-color: #f00;
}
</style>
<body>
<div> </div>
</body>
2、使用【margin:auto】法
这个也可以是定位法。用这个方法要求子级div必须设置宽的值，不然没有效果哦~margin:auto是水平垂直都居中，如果仅仅设置水平居中，可设置为margin:auto 0;同理，如果仅仅设置垂直居中，可设置为margin:0 auto。
<style>
div{
position: absolute;/* 或者使用fixed */
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 300px;
height: 200px;
background-color: #f00;
}
</style>
<body>
<div> </div>
</body>
3、使用【display:table-cell】法
这个方法主要针对多行文字内容的垂直居中对齐。注意：text-align:center设置了文字的水平居中对齐，vertical-align:middle设置的是垂直居中对齐。
<style>
div{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 300px;
height: 200px;
background-color: #f00;
margin: auto;
}
p{
display: inline-block;
vertical-align: middle;
width: 150px;
height: 100px;
border: 1px solid #ccc;
color: #fff;
}
</style>
<body>
<div>
<p>多行文字内容，居中设置效果</p>
</div>
</body>
4、使用【transform:translate(x,y)】法
这个是css3中的新属性，如果子级元素没有设置宽和高值的话可以用这个方法来实现。这在我们做自适应页面的时候可以用到。
<style>
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
<body>
<div>transform:translate(x,y)方法，绝对居中效果</div>
</body>
|
