1、水平居中
行内元素(文本图片):text-align:center
定宽块状元素(块状元素的宽度width为固定值):先设置固定宽度,再设置“左右margin”值为“auto”来实现居中
不定宽块状元素(块状元素的宽度width不是固定值):
- 加入 table 标签
1⃣️为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
2⃣️为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。
<div class="wrap"> 设置我所在的div容器水平居中 </div> // <table> <tbody> <style> table{ border:255px; margin:0 auto; } </style> <tr><td> <div class="wrap"> 设置我所在的div容器水平居中 </div> </td></tr> </tbody> </table>
- 设置 display: inline 方法:改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后使用
text-align:center
来实现居中效果。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> / 这种方法相比第一种方法的优势是不用增加无语义标签,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。
- 设置 position:relative 和 left:50%:利用相对定位 的方式,给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>不定宽块状元素水平居中</title> <style> .container{ float:left; position:relative; left:50% } .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } .container li{float:left;display:inline;margin-right:8px;} /*下面是代码任务区*/ .wrap{ clear:both;//清除两侧浮动,独占一行// float:left; position:relative; left:50% } .wrap-center{ background:#ccc; position:relative; left:-50%; } </style> </head> <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> <!--下面是代码任务区--> <div class="wrap"> <div class="wrap-center">我们来学习一下这种方法。</div> </div> </body> </html>
2、垂直居中
父元素高度确定的单行文本:通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的 基线间的距离 )。
父元素高度确定的多行文本
1、使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。
2、在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式, 兼容性比较差。
只要html代码中出现position : absolute 或 float : left /float:right 两句之一,元素的display显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素。