1、水平居中設(shè)置-行內(nèi)元素
通過父元素設(shè)置 1 text-align:center; ，讓父元素的內(nèi)容居中
2、水平居中設(shè)置-定寬塊狀元素
塊狀元素的寬度width為固定值，通過設(shè)置“左右margin”值為“auto”來實現(xiàn)居中的
例子：
CSS Code復(fù)制內(nèi)容到剪貼板
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>定寬塊狀元素水平居中</title>
<style>
div{
width: 200px;/*固定的寬度*/
margin: 20px auto;/*左右margin設(shè)置為auto*/
border: 1px solid red;
}
</style>
</head>
<body>
<div>我是定寬塊狀元素，我要水平居中顯示。</div>
</body>
</html>
3、水平居中設(shè)置-不定寬塊狀元素
方法1. 加入 table 標簽
例子：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定寬塊狀元素水平居中</title>
<style>
table{
margin:0 auto;
}
/*下面是任務(wù)區(qū)代碼*/
.wrap{
background:#ccc;
}
</style>
</head>
<body>
<table>
<tbody>
<tr><td>
<div class="wrap">
我要水平居中
</div>
</td></tr>
</tbody>
</table>
</body>
</html>
方法2. 設(shè)置 display:inline; 方法，與第一種類似，顯示類型設(shè)為行內(nèi)元素，進行不定寬元素的屬性設(shè)置
例子：
CSS Code復(fù)制內(nèi)容到剪貼板
新聞熱點
疑難解答
