CSS vertical center guide and css center Guide

CSS vertical center guide and css center Guide

Sort out the vertical center problem in css.

Mainly divided into two categories

1. Knowing the size of a block element generally refers to knowing the element height.

Method 1: The simplest analogy is horizontal center.

Idea: Set sub-elements to absolute; Set top bottom to 0; margin: auto; that's all;

<Div class = "lev1"> I am the first <div class = "lev2"> I am the second </div>/* CSS */. lev1 {width: 200px; height: 200px; background-color: # 008BCD; border: 1px solid # 1874CD; position: relative ;}. lev2 {background-color: # C078CD; border: 1px solid # B800CD; width: 100px; height: 100px; position: absolute; top: 0; bottom: 0; margin: auto ;}

Method 2: Set the absolute position of the sub-element to margin-top:-height/2; top: 50%;

Idea: it is also an absolute positioning. Understanding negative margin is the key point. If negative margin is set to a negative value, the actual height of the element will be reduced, and the ing to HTML is generally shown as being pulled up (the margin-top2 is negative) or pull other elements above (margin-bottom is negative ). Specific can refer to this blog http://www.51xuediannao.com/html+css/htmlcssjq/css-margin.html

Finally, I would like to say a few more words: if you do not know the height of the child element, you can transform: translateY (-50%); is it really witty !!!

<Div class = "lev3 lev3"> I am the first <div class = "lev4"> I am the first (absolute margin:-height/2; top: 50%) </div>/css /. lev3 {width: 200px; height: 200px; background-color: # 008BCD; border: 1px solid # 1874CD; position: relative ;}. lev4 {background-color: # C078CD; border: 1px solid # B800CD; width: 100px; height: 100px; position: absolute; top: 50%; margin-top:-50px ;}

Method 3: add an extra sub-div so that its height is equal to 50%. Then set its margin-bottom:-height/2, which is equivalent to pulling the content up so many heights.

Idea: understanding negative margin is the key. Key point: the attribute to be set by floater (Why should float be set and cleared? Setting the height to 50% is relative to the parent element; margin-top:-height/2 is equivalent to pulling the child element up so many distances)

<div id="parent"><div id="floater"></div><div id="child">Content here</div></div>/*CSS*/#parent {height: 250px;}#floater {float: left;height: 50%;width: 100%;margin-bottom: -50px;}#child {clear: both;height: 100px;}

Method 4: Set the parent element to table, and the child element to table-cell vertical-alight: middle;

Idea: You can change the layout attribute to layout unknown height elements. By the way, I will review the vertical-align attribute. It seems complicated to study it. Remember that the simplest one is only valid for the inline and inline-block attributes.

Portal vertical-align specific understanding http://www.zhangxinxu.com/wordpress/2010/05/%E6%88%91%E5%AF%B9css-vertical-align%E7%9A%84%E4%B8%80%E4%BA%9B%E7%90%86%E8%A7%A3%E4%B8%8E%E8% AE %A4%E8%AF%86%EF%BC%88%E4%B8%80%EF%BC%89/

div id="parent"><div id="child">Content here</div></div>/*CSS/#parent {display: table;}#child {display: table-cell;vertical-align: middle;}

Method 5: it's also a black technology. Use the ghost element to open it.

Specific Method:

<div class="ghost-center">  <p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p></div>/*CSS/body {  background: #f06d06;  font-size: 80%;}div {  background: white;  width: 240px;  height: 200px;  margin: 20px;  color: white;  resize: vertical;  overflow: auto;  padding: 20px;}.ghost-center {  position: relative;}.ghost-center::before {  content: " ";  display: inline-block;  height: 100%;  width: 1%;  vertical-align: middle;}.ghost-center p {  display: inline-block;  vertical-align: middle;  width: 190px;  margin: 0;  padding: 20px;  background: black;}

Of course, there are several unmentioned items, such as Flex layout, which is very simple, and padding: 10 p 0; line-heights = height;