Home > Developer > Web Develop

CSS unknown wide height element horizontally vertically centered

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Method One
Idea: The display setting parent element is: table, child element: cell-table, so you can use Vertical-align:center to achieve horizontal center
Advantage: Parent element can dynamically change height (attribute of Table Element)
Cons: IE8 not supported below

<! DOCTYPE html>
Method Two:
Idea: Use an empty label span to set his vertical-align baseline to the middle, and let him be the Inline-block, with a width of 0
Cons: More than a useless empty label, Display:inline-blockie 6 7 is not supported (add on: _zoom1;*display:inline).
Of course, you can use pseudo-elements instead of span tags, but IE support is not good, but it's something.
<! DOCTYPE html>
Method Three
Idea: Sub-element absolute positioning, distance from top 50%, left 50%, then use CSS3 transform:translate (-50%;-50%)
Pros: Tall, can be used in the WebKit kernel browser
Cons: Unsupported IE9 The following does not support transform properties

 
  

  
    
    
 
     123456789101112131415161718192021222324252627 
     <!DOCTYPEhtml><htmllang="en"><head>    <metacharset="UTF-8">    <title>未知宽高元素水平垂直居中</title></head><style>.parent3{    position: relative;    height:300px;    width: 300px;    background: #FD0C70;}.parent3 .child{    position: absolute;    top: 50%;    left: 50%;    color: #fff;    transform: translate(-50%, -50%);}</style><body><divclass="parent3">        <divclass="child">hello world-3</div>    </div></body></html> 
    
 
   
 
  
Method Four:
Idea: Using the CSS3 Flex layout
Advantages: Simple and fast
Disadvantage: Compatibility is not good, see more: http://caniuse.com/#search =flex
<! DOCTYPE html>
CSS unknown wide height element horizontally vertically centered

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More