1、行内元素水平居中，可以在父元素中使用text-align:center;垂直居中可以用，line-height:100px;例如：
<style type="text/css">
div{
width:300px;
height:100px;
text-align:center;
line-height:100px;
}
</style>
<div>
<span>文字居中</span>
</div>
2、块级元素水平居中，可以用margin:auto;代码如下：
<style type="text/css">
div{
width:300px;
height:100px;
margin:0px auto;//上下边距为0，水平居中
background:#ccc;
}
</style>
<div>
<span>文字居中</span>
</div>
3、元素绝对居中，利用定位position，代码如下：
<style type="text/css">
div{
width:300px;
height:100px;
position:relative;
}
div p{
width:100px;
height:20px;
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
</style>
<div>
<p>文字居中</p>
</div>
4、元素绝对居中的另一种方法，代码如下：
<style type="text/css">
div{
width:300px;
height:100px;
position:relative;
background:#bbb;
}
div p{
width:100px;
height:20px;
position:absolute;
top:50%;
margin-top:-10px;
left:50%;
margin-left:-50px;
}
</style>
<div>
<p>文字居中</p>
</div>
日期：2017年11月22日 07:26:12 星期二 分类：
好文分享 浏览(31212)
本文地址：https://www.blogs.hk/post-2871.html [
百度已收录]
声明：本页信息由网友自行发布或来源于网络，真实性、合法性由发布人负责，请仔细甄别！本站只为传递信息，我们不做任何双方证明，也不承担任何法律责任。文章内容若侵犯你的权益，请联系本站删除！
留言咨询