Using CSS to achieve a div horizontal center display

How do I use CSS to center the div display? For everyone to do a simple code, the use of CSS to achieve a div horizontal center display, the need for friends can learn from reference.

The main CSS code needed is two, one is text-align:center (content Center), the other is margin:0 auto, and its two styles need to be used in order to achieve the center display layout of Div box.

First we set the body Text-align:center, and then the need to center the Div box set CSS style margin:0 auto, so that the corresponding Div horizontal center.

Div Center Code application, in order to observe the DIV center effect, we set a div to the div named ". Div" in the HTML div tag using class= "DIV", set its width is 400px, height is 100px, the border is red. So that we can observe the effect.

1. Complete HTML+CSS Code

<! DOCTYPE html> 
2, Div+css Center instance

Div CSS for center effect

Div for center effect


3, Div Center code application features

This centering method is to make the DIV center effect perfectly compatible with the major platforms, compatible with the major browsers, regardless of the high version ie or high version of IE are compatible.

This is the way to achieve a div horizontal center display using CSS.

Related reading:

How HTML turns into a TXT file



How to set a table border on table and TD background



 for table and TD tricks