一、行内元素-水平居中
在父元素的样式中添加：
text-align:center;
二、定宽块级元素-水平居中
所谓定宽块级元素指块级元素的宽度指定，而不是默认的100%，否则此方法无效；
代码：
html: <body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div> </body> css: <style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style>
三、不定宽块级元素-水平居中
三种思路：
- 加入 table 标签，将这个table居中；
- 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置；
html: <body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body> css: <style> .container{ text-align:center; } /* margin:0;padding:0（消除文本与div边框之间的间隙）*/ .container ul{ list-style:none; margin:0; padding:0; display:inline; } /* margin-right:8px（设置li文本之间的间隔）*/ .container li{ margin-right:8px; display:inline; } </style>
以上是例子代码。
- 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的；
四、父元素高度确定的单行文本-垂直居中
思路：设置父元素的 height 和 line-height 高度一致来实现。line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
height:该元素的高度；
line-height:行高（行间距），在文本中，行与行之间基线的距离。
注意：这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>垂直居中</title> <style> .wrap h2{ margin:0; /*20px;*/ /*如果取消注释，则文本会显示在盒子外*/ height:100px; line-height:100px; background:#ccc; } </style> </head> <body> <!--下面是代码任务部分--> <div class="wrap"> <h2>hi,imooc!</h2> </div> </body> </html>
五、父元素高度确定的多行文本-垂直居中
两个思路：
1.使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。
html: <body> <table><tbody><tr><td class="wrap"> <div> <p>看我是否可以居中。</p> </div> </td></tr></tbody></table> </body> css: table td{height:500px;background:#ccc; vertical-align:middle;}
2.在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
html: <div class="container"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div> </div> css: <style> .container{ height:300px; background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/ } </style>