CSS Vertical centering method (i)

Source: Internet
Author: User

The first method is to first use margin:0 Auto to center horizontally, then set position:relative, set top to 50% (parent element height of 50%), and then set margin-top:-150px (negative value is set because you want to move the div up, 150px is the height of the div), the code is as follows:

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Index</title>    <style>Html,body{width:100%;Height:100%;margin:0;padding:0;        }. Content{width:300px;Height:300px;background:Orange;margin:0 Auto; /*Center Horizontally*/position:relative;Top:50%; /*Offset*/Margin-top:-150px;         }    </style></Head><Body>    <Divclass= "Content"></Div></Body></HTML>

The implementation results are as follows:

Because the div has a height, you can assign overflow:auto to it so that if there is too much content in the Div, the scroll bar appears. The point of this approach is that you can use not so many nested tags, but also for all browsers, the downside is that if the browser window shrinks to a certain extent, the div disappears

The second method: On the basis of the above method, in addition to setting the margin-top upward move, you can also set the CSS3 Transform property can also implement this function, by setting the Div transform:translatey (-50%), This means that the div pans upward (translate) by half of its height (50%), the code is as follows:

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Index</title>    <style>Html,body{width:100%;Height:100%;margin:0;padding:0;        }. Content{width:300px;Height:300px;background:Orange;margin:0 Auto; /*Center Horizontally*/position:relative; Top:50%; /*Offset*/Transform:Translatey ( -50%);        }    </style></Head><Body>    <Divclass= "Content"></Div></Body></HTML>

The third way: with CSS3 's flexible layout (flex), the problem becomes much easier. Using CSS3 's elastic layout is simple, as long as the display value of the parent element (this is the body) is flex.

The code is as follows:

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Index</title>    <style>Html,body{width:100%;Height:100%;margin:0;padding:0;        }Body{Display:Flex;Align-items:Center; /*the element that defines the body is centered vertically*/justify-content:Center; /*defines the horizontal center of the element inside the body*/        }. Content{width:300px;Height:300px;background:Orange;                }    </style></Head><Body>    <Divclass= "Content"></Div></Body></HTML>

CSS Vertical centering method (i)

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.