標籤：html css 置中
1前言做頁面配置時，經常會需要將一些頁面元素置中顯示。當然，你可以設定元素的top、left來使它置中，但是，當父容器的大小發生變化，你不得不修改子項目的top、left來使它保持置中；當使用者的顯示器解析度與你的測試機不同，可能會導致介面亂成一片，所以不管從代碼的易維護性的角度還是從對不同解析度顯示器的適應性方面來說，這種設定固定值的方法顯然是比較拙劣的。因此，做頁面配置，應盡量減少使用固定值的布局方式。下面介紹幾種頁元素置中的方法。
1Div置中1.1左右置中在父視窗中設定text-align:center，要注意的是，此方法只對內嵌元素起作用，所以要在置中的div中設定display:inline-block。以下代碼中紅線部分表示了如何讓3個div在itemContainer中置中顯示。
如果是單個元素置中，也可以用margin:0auto，但此方法不能使多個元素在父視窗中置中。
1.2上下置中text-align屬性只能設定左右置中，上下置中可以採用如下方法：top:50%;margin-top:-40px。top:50%設定div頂部位於父容器高度50%的地方，但是div本身有高度，margin-top:-40px表示上移div自身高度的一半。要注意的是父容器要設定overflow:auto，否則以上設定會影響父容器的大小。
如果需要上下左右同時置中，則與2.1所示方法結合使用。
以下代碼中紅線部分表示了如何使itemContainer在整個頁面中置中顯示。
2文本置中方法一：把文本放在div標籤中，然後按照div置中的方法設定置中
方法二：左右置中text-align:center，上下置中可以設定在文本的父容器中設定line-height等於父容器高度，如以下代碼所示。
3背景圖片置中設定background: 50% 50%，可調整這兩個參數使用僅上下置中(background: 0% 50%)和僅左右置中(background: 50% 0%)。
4測試案例<%@page contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPEhtml PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<htmlstyle="width:100%;height:100%">
<head>
<style type="text/css">
.item{background:url("pic.png")no-repeat 50% 50%;position:relative;display:inline-block;width:80px;height:80px;outline:solid2px #000000;;line-height:80px}
</style>
</head>
<bodystyle="width:100%;height:100%;margin:0px;overflow:auto">
<div id="itemContainer"
style="position:relative;width:400px;height:80px;outline:solid 2px#ff0000;text-align:center;top:50%;margin:0 auto;margin-top:-40px">
<div class="item">
測試
</div>
<div class="item">
測試
</div>
<div class="item">
測試
</div>
</div>
</body>
</html>
頁面元素置中的幾種方法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
