1.行内元素设置水平居中
通过设置父元素
text-align:center
2.定宽块状元素设置水平居中
通过设置“左右margin”值为“auto”来实现居中的。
width:500px;/*定宽*/
margin:0px auto;/* margin-left 与 margin-right 设置为 auto */
3.不定宽块状元素设置水平居中
(1)为需要设置的居中的元素外面加入一个 table 标签;这个table的CSS样式设置为“左右 margin”的值为auto
<tbody><tr><td>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</td></tr></tbody>
table{
margin:0 auto;
}
(2)改变块级元素的 dispaly 为 inline 类型,然后使用 text-align:center 来实现居中效果
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
.container{
text-align:center;
}
.container ul{
list-style:none;
display:inline;
}
.container li{
margin-right:8px;
display:inline;
}
(3)通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%; 子元素设置 position:relative 和 left:-50% 来实现水平居中。
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
.container{
position:relative;
left:50%
}
.container ul{
list-style:none;
position:relative;
left:-50%;
}
.container li{
float:left;
display:inline;
margin-right:8px;
}
4.父元素高度确定的单行文本垂直居中
通过设置父元素的 height 和 line-height 高度一致来实现
<div class="container">
hi,imooc!
</div>
.container{
height:100px;
line-height:100px;
}
5.父元素高度确定的多行文本垂直居中
(1)使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
td 标签默认情况下就默认设置了 vertical-align 为 middle
(2)设置块级元素的 display 为 table-cell,设置 vertical-align 属性
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
.container{
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
以上技巧和代码整理致 imooc