CSS Article 2---How to keep the floating layer horizontally vertically centered

Source: Internet
Author: User

How to keep the floating layer horizontally vertically centered. notehttp://www.cnblogs.com/yaliu/p/5190957.html (i) using absolute positioning and transform  
      <div class= "Parent" > <div class= "Children" ></div> </div> 
Position the parent element, as the child element
{ position: absolute; top: 50%; Left: 50%;    -webkit-transform:translate ( -50%,-50%);   Background: black; }

(ii) utilization of Flexbox
. Parent { justify-content:Center; align-items:Center;  display: -webkit-flex; }

(c) When the height of the child element is fixed, the parent element contains other elements other than the center element (the empty label is also a row) or the parent element is not at 0 o'clock to position the parent element, the child element is absolutely positioned, and the margin negative value is half the height of the child element. The code is as follows:
<div class= "parent" > <div class= "Children" ></div> <span></span> </di v>. Parent{Height:400px;//There are other elements other than the positioning element can not be set, if not, you need to position:relative;background:Red; }. Children{width:200px;Height:200px;margin:-100px 0 0-100px;background:Black;position:Absolute;Top:50%; Left:50%; }

  (d) Use table      table's TD default content to center vertically. Just set the content to center horizontally   (v) display:table-cell      css has a property vertical-align for vertical centering, but only   When the parent element is TD or TH, this vertical-align property will take effect, for other block-level elements, such as  div, p, and so on, by default, the Vertical-align property is not supported. The display type of the block-level element can be set to Table-cell, activating the Vertical-align attribute, but Display:table-cell;    There are compatibility issues, so this approach is not compatible across browsers.    <div class= "Parent" > <div class= "Child" > Haha </div> </div> . parent {width:400px;    height:100px;    Background:black;    Display:table-cell;    Vertical-align:middle;  Text-align:center;    }. Child {background:red;  Display:inline-block; Compatibility of} display:table-cell   (vi) Use of positioning and Margin:auto  <div class= "parent" > <div class= "Child" > haha </div> </div>        .parent{                width:600px;                height:400px;               background:red;               Position: relative;         }           .children{               width:200px;               height:200px;                position:absolute;                top:0;                left:0;                bottom:0;                right:0;               margin : auto;               Background:black;          }

CSS 2---How to keep the floating layer horizontally vertically centered

Related Article

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.