CSS水平居中方法汇总（有经验有转帖）

原创于 2012-05-22 21:30:57 发布 · 770 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #input

网络笔记同时被 3 个专栏收录

19 篇文章

订阅专栏

HTML

8 篇文章

订阅专栏

CSS

1 篇文章

订阅专栏

本文详细介绍了如何使用CSS中的容器与控件布局技术，包括绝对定位、文本对齐方式以及margin属性的运用，旨在实现高效且美观的网页布局。

#ControlPad
{
    position:absolute;
    left:50%;
    width:500px;
    height:92px;
    margin-left:-250px;
    text-align:center;
    }
#ControlPad input
{
	left:auto;
	right:auto;
	width:100;
	}

容器使用text-align,下面的控件left,rigth,auto即可，如果不是input控件，理论上使用了text-align即可。但是居中控件必须有固定width，内部元素要补text-align:left;

#container
{
background:#ffcurl(mid.jpg)repeat-ycenter; 
position:absolute;
 left:50%; width:760px; 
margin-left:-380px; 
}

兼容性最强。红绿成对，红表示坐标0在，总宽度的1/2，也就是中间。绿左边缘在坐标左面（负号）1/2width的地方，那么水平中点和坐标0重合。

margin:0 auto;

最简单的方法。