[Transfer] Div CSS tutorial: Summary of methods to achieve horizontal centering of div containers_html/css_WEB-ITnose

Page layout in web standards is implemented using Div and CSS. The most commonly used one is the effect of horizontally centering the entire page. This is the basic knowledge in page layout and the most important knowledge that should be mastered first. However, people still often ask this question. Here I will briefly summarize the method of using Div and CSS to achieve horizontal centering of the page: 1. margin:auto 0 and text-aligh:center
In modern browsers (such as the Internet Explorer 7, Firefox, Opera, etc.) The method to achieve horizontal centering in modern browsers is very simple, just set the left and right blanks to automatic. That means:
#wrap { margin:0 auto;}
The above code means that the distance from the wrap div to the left and right sides is automatically set, with the upper and lower values ​​being 0 (can be any). Please run the current code in a modern browser (such as Internet Explorer 7, Firefox, Opera, etc.):

在Firefox等现代浏览器设定页面元素的水平居中，只要指定margin:0 auto;即可

div#wrap {width:760px;margin:0 auto; /*这里的0可以任意值*/border:1px solid #ccc;background-color:#999;}

　　上面的效果很好。但是这在Internet Explorer 6及改正的版本中是不起作用的，不过幸好它有自己的解决办法。在 Internet Explorer中text-align属性是可继承的，即在父元素中设置后在子元素中就默认具有了该属性。因此我们可以在body标签中设置text- align属性值为center，这样页面内所有的元素都会自动居中，同时我们还要加一个hook把页面中的文字变成我们习惯的阅读方式??居左对齐。因 此我们要如此来写代码：
body {text-align:center;}
#wrap {text-align:left;}
　　这样在Internet Explorer中我们就轻松实现了Div的居中对齐。因此要在所有的浏览器中显示居中的效果，我们就可以这样写我们的代码：
body { text-align:center; }
#wrap { text-align:left;
margin:0 auto;
}

在Firefox等现代浏览器设定页面元素的水平居中，只要指定margin:0 auto;即可

div#wrap {width:760px;margin:0 auto; /*这里的0可以任意值*/border:1px solid #ccc;background-color:#999;}在Internet Explorer 6 及以下的版本中我们还要做以下的设置：body { text-align:center; }div#wrap {text-align:left;}

　　不过这里有一个前提，就是设置居中的元素要有固定的宽度，比如这里我们设定了为760像素。
二、相对定位与负的边距
　　对于wrap进行相对定位，然后使用负的边距抵消偏移量。这种方法比较简单还很容易实现：
#wrap {
position:relative;
width:760px;
left:50%;
margin-left:-380px
}
　　这段代码的意思是，设置wrap的定位是相对于其父元素body标签的，然后将其左边框移动到页面的正中间（也就是left:50%含意）；最后我们再从中间位置向左偏移回一半的距离来，这样就实现了水平居中了。

在所有浏览器中都有效的方法：

div#wrap {position:relative;width:760px;left:50%;margin-left:-380px;border:1px solid #333;background-color:#ccc;}

　　同样，在设定水平居中前你需要设定一个固定的宽度。
　　究竟选择哪个方法？
　　上面两个方法究竟选择哪种方法好呢？在第一种方法中貌似使用了Hack技术，其实并没有，它是中规中矩的Web标准写法，完全符合规范，因此，两个种方法中完全可以随便的选取其中的任一种进行使用，他们不存在CSS hack的问题。
三、其它的居中方式
　　上面所说的都是设定了具体宽度的情况下水平居中的实现。有时候我们想做一个弹性布局，或者当一个元素处于一个容器中时我们只想让它居中并不想 设定一个具体的宽度。其实这并不是真正的居中布局，就像对一个100%长度的元素来说，你说它是居中对齐还是居左对齐呢？所以所有不高宽度的居中都不是真 正的居中。这样的设计我们是使用的像元素的padding来设置的，实际中我们是改变了父元素的容器大小：
如我们希望wrap元素长度随窗口而改变，同时又维持居中，我们就可以这样写：
body {
padding:10px 150px;
}
　　这里，我们只需要保持父元素左右两侧的填充是相等的就可以了。

一种随浏览器窗口大小而改变的具有弹性的居中布局：

body {padding:10px 150px;}这里，我们只需要保持父元素左右两侧的填充是相等的就可以了。

　　当然这只是“貌似居中”，不过却常常很有用处。

To set the horizontal centering of page elements in modern browsers such as Firefox, just specify margin:0 auto; The above works very well. But this doesn't work in Internet Explorer 6 and later, but luckily it has its own workaround. In Internet Explorer, the text-align attribute is inheritable, that is, after it is set in the parent element, it will be set in the child element by default. Therefore, we can set the text-align attribute value in the body tag to center, so that all elements on the page will be automatically centered. At the same time, we also need to add a hook to change the text on the page into our accustomed reading method - left-aligned. So we have to write the code like this: body {text-align:center;} #wrap {text-align:left;} In this way, we can easily achieve center alignment of Div in Internet Explorer . Therefore, to display the centering effect in all browsers, we can write our code like this: body { text-align:center; } #wrap { text-align:left; margin :0 auto; } In the settings page of modern browsers such as Firefox To center the element horizontally, just specify margin:0 auto; However, there is a premise here, that is, the centered element must have a fixed width, such as Here we set it to 760 pixels. 2. Relative positioning and negative margins Perform relative positioning for wrap, and then use negative margins to offset the offset. This method is relatively simple and easy to implement: #wrap { position:relative; width:760px; left:50%; margin-left:-380px } The meaning of this code is to set the positioning of wrap relative to the body tag of its parent element, and then move its left border to the middle of the page (that is, the meaning of left:50%); finally we start from The middle position is offset half the distance to the left, thus achieving horizontal centering. Method that works in all browsers: Likewise, you need to set a fixed width before setting horizontal centering. Which method to choose? Which of the above two methods is better? The first method seems to use Hack technology, but in fact it does not. It is a quite satisfactory Web standard writing method and fully complies with the specifications. Therefore, you can choose any one of the two methods for use. They do not There is a CSS hack problem. 3. Other centering methods The above are all implementations of horizontal centering when a specific width is set. Sometimes we want to make a flexible layout, or when an element is in a container we just want it to be centered and don't want to set a specific width. In fact, this is not a true centered layout. For an element with 100% length, would you say it is centered or left aligned? So any centering that is not high or wide is not true centering. We set this design using the padding of the element. In fact, we change the container size of the parent element: If we want the length of the wrap element to change with the window while maintaining the center, we can do this Write: body { padding:10px 150px; } Here, we only need to keep the padding on the left and right sides of the parent element equal. A flexible, centered layout that changes with the size of the browser window: Of course this is just "seemingly centered", but it is often very useful.

?