参考资料

慕课网

CSS实现元素的水平居中 

行内元素

1.为行内元素（文本、图片等）设置水平居中

原理

对行内元素的父级元素设置： text-align: center;

案例

html

<div class="panel">

<h1>为行内元素设置水平居中</h1>

<p class="v-in"><span>将文本设置为水平居中</span></p>

</div>

css

*{padding:0;margin:0;}

.panel{width:100%;height:300px;background-color:#a0a0a0;}

.v-in{width:100%;height:45px;line-height:45px;background:#000;color:#fff;font-size:14px;font-family:"Microsoft YaHei";text-align:center;}

结果

行内元素的水平居中

块级元素

1.定宽块级元素的水平居中

原理

元素需要设置一定的宽度，然后在通过设置：margin: 0 auto;实现；

案例

html

<div class="panel1">

<h1>定宽块级元素的居中</h1>

</div>

css

.panel1{width:100%;height:60px;background-color:cadetblue;color:#ffff;margin-top:30px;}

.panel1h1{width:800px;height:60px;line-height:60px;backgroundcolor:coral;color:#fff;text-align:center;margin:0 auto;}

结果

定宽元素的水平居

2.不定宽块级元素的水平居中

原理1--加入table标签

利用利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

实现：

给需要设置居中的元素外面加入一个table标签（包含tbody,tr,td）,然后给table设置margin: 0 auto;

案例1

html

<div class="panel2">

<h1>不定宽块级元素的居中--加入table</h1>

<table>

<tr>

<td>

<ul>

<li>< a href="javascript:;">item1</a></li>

<li><a href="javascript:;">item2</a></li>

<li><a href="javascript；；">item3</a></li>

</ul>

</td>

</tr>

</table>

</div>

css

.panel2{width:50%;height:200px;background-color:coral;margin:30px 0;}

.panel2table{margin:0 auto;}

a{text-decoration:none;}

.panel2 ul  li{list-style:none;}

结果

不定宽元素的居中

原理2--display:inline/inline-block;

将块级元素改变为行内元素，然后对其父级元素设置：text-align: center;

案例2

html

<div class="panel3">

<ul>

<li><a href="javascript:;">item</a></li>

<li><a href="javascript:;">item</a></li>

</ul>

</div>

css

.panel3{width:100%;height:100px;background-color:darkseagreen;textalign:center;}

.panel3ul{display:inline-block;}

.panel3ul li{list-style:none;display:inline-block;}

结果

不定宽元素的居中

原理3--浮动+相对定位

通过给父元素设置float，然后给父元素设置position:relative和left:50%，子元素设置position:relative和left:-50%来实现水平居中

案例3

html

<div class="panel4"><ul><li>1</li><li>2</li><li>3</li></ul></div>

css

.panel4{float:left;position:relative;left:50%;}

.panel4 ul{margin-top:100px;float:left;position:relative;left:-50%;}

.panel4 ul li{display:inline-block;margin-right:10px;list-style:none;width:20px;height:20px;line-height:20px;text-align:center;border-radius:100%;background-color:lightblue;color:#333;}

结果

不定宽元素的居中

CSS实现元素的垂直居中

1.父元素高度固定的的单行文本

原理

给父级元素设置固定的高度，然后设置：line-height的值与高度一致；

弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

案例

html

<div class="panel5">

<span>父元素高度固定的单行文本</span>

</div>

css

.panel5 {

width:300px;

height:200px;

line-height:200px;

text-align:center;

color:#fff;

background-color:cornflowerblue;

clear:both;

}

结果

父级定宽的单行文本垂直居中

2.父元素高度固定的多行文本--方法1

原理：

使用插入table(包括tbody、tr、td)标签，同时设置vertical-align：middle（td标签默认情况下就默认设置了vertical-align为middle，可省略）;

案例

html

<table>

<tbody>

<tr>

<td class="pra">

<p>父元素固定的个多行文本设置垂直居中</p>

<p>父元素固定的个多行文本设置垂直居中</p>

<p>父元素固定的个多行文本设置垂直居中</p>

<p>父元素固定的个多行文本设置垂直居中</p>

</td>

</tr>

</tbody>

</table>

css

*{

padding: 0;

margin: 0;

}

.par {

width: 100%;

height: 400px;

background: #ccc;

}

效果

父元素高度固定的多行文本垂直居中

3.父元素固定的多行文本垂直居中方法2--display: table-cell;(设置为表格单元显示)

原理

在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell（设置为表格单元显示），激活vertical-align属性，但注意IE6、7并不支持这个样式,兼容性比较差。

案例

html

<div class="container">

<p>父元素垂直高度固定的垂直居中</p>

<p>父元素垂直高度固定的垂直居中</p>

<p>父元素垂直高度固定的垂直居中</p>

</div>

css

.container {

display: table-cell;

width: 300px;

height: 400px;

background: #aa00dd;

vertical-align: middle;

text-align: center;

}

结果

父元素宽度固定的多行文本的垂直居中