CSS Div+css Layout Center

First, using automatic margin to achieve the center

The preferred way to center elements horizontally in CSS is to use the margin property-set the Margin-left and Margin-right properties of the element to auto. In practical use, we can create a container-scoped div for these elements that need to be centered. It is important to note that you must specify a width for the container:

DIV+CSS Layout Center

Div#container {

Margin-left:auto;

Margin-right:auto;

width:168px;

height:80px;

}

Second, the use of text-align to achieve the center

Another way to center the element is to use the Text-align property, set the property value to center, and apply it to the BODY element. This approach is downright hack, but it is compatible with most browsers, so it is naturally necessary in some cases.

It is hack because this method does not apply the text attribute to the text, but instead applies it to the element that is the container. This also brings us extra work. After creating the div necessary for the layout, we will apply the Text-align property to the body as follows:

DIV+CSS Layout Center

body{

Text-align:center;

}