Several ways to center div in HTML

Source: Internet
Author: User

In the development process, many requirements need us to center a Div, such as the HTML document flow of a div, such as the pop-up layer content part of this out of the flow of documents. Different situations have different centering methods, then share the next several common centers.

1.text-align:center.

Code:

<div class= "center" > <span class= "center_text" >123 </span></div>
. Center { text-align:center;} Center_text { display:inline-block; width:500px}

This way you can horizontally center the inline elements in a block-level element, such as Inline,inline-block;

But if you are using a block-level element in a block-level element, such as a div in a div, this method will fail once the inner div has its own width. Only the text inside the div can be centered, and the div is still left aligned.

In another case, when the inner element is out of the flow of the document, Display:absolute, regardless of whether it is a block-level element, it will be centered, but the center is not based on the contents of the internal Div, but the left side of the inner Div, The leftmost of the internal div is in the middle of the div (the premise external div sets the position:relative/absolute/fixed);

Inline elements are centered vertically

2.margin:0 Auto;

3.

Vertical Linehight

Several ways to center div in HTML

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.