CSS DIV centered

 If you're used to using DIV layout to do a web page, it will inevitably encounter DIV need to set the time, in most of the major browsers, you want to make DIV home, only need to use margin can reach , But that’s not the case in IE! This article shares several different situations.

1. DIV centering syntax suitable for most browsers

margin:0px auto;

This writing is basically suitable for common mainstream browsers such as FireFox , Google Chrome , Opera, etc.

2. DIV centering syntax for IE8

<div style="text-align:center;background-color:#FFAC55;width:500px;height:50px;">
　<div style="background-color:#FFAFFE;width:300px;height:20px;margin:0 auto;"></div>
</div>

Schematic diagram

This technique uses two <DIV>s to cooperate. The parent <DIV> setting text-align:center means that the block is aligned in the center. The background-color used in the example is the background color. The main purpose is to make the example easier to present. In addition, width and height are the width and height of the div, respectively.

3. DIV centering syntax for IE6 and IE7

_margin:0px auto; //for IE6 　*margin:0px auto; //for IE7

The above DIV centering method is mainly to center the entire DIV block instead of the elements in the DIV. If you want to center the text, pictures or other elements in the DIV, please refer to CSS text-align and CSS text is centered vertically .