We all know that the fixed high-width div in the vertical center of the Web page is very simple, I believe you can also easily write, but not a fixed high-width div How to center vertically? We are in the page layout, especially the mobile phone and other web pages are often not fixed high-width div, then how these div vertical center it? This article, I summarize.
Fixed high-width div vertically centeredFor example, the fixed high-width is very simple, the wording is as follows:
position: absolute; left: 50%; top: 50%;width:200px;height:100px;margin-left:-100px;margin-top:-50px;Method One:
Using a "ghost" pseudo-element (invisible pseudo-element) and Inline-block/vertical-align can be settled in, very ingenious. But this method requires that the element to be centered is inline-block, not a truly generic scheme.
The HTML is as follows:
<div Class="Block" style= "height: 300px; " > <div class< Span class= "pun" >= "centered" >
haorooms case title <p>< Span class= "PLN" >haorooms case content, Haorooms Case Content haorooms case Content haorooms case Content haorooms case Content haorooms case Content haorooms case Content haorooms case Content haorooms case content </p> </div></div>
The CSS is as follows:
/* This parent can is any width and height */.Block{Text-Align:Center;}/* The Ghost, nudged to maintain perfect centering */.Block:Before{Content: ‘‘;Display: Inline-Block;Height: 100%;Vertical-Align:Middle;Margin-Right: -0.25em; / * Adjusts for spacing */}/* The element to is centered, can also is of any width and height */ . Centered { display: Inline-block; Vertical-align: Middle; width: %;} Method Two:
You can use table layout method, but this method also has limitations!
The wording is as follows:
<table Style="Width: 100%;> <tr> <td style= "text -align: Center; Vertical-align: Middle "> Unknown stuff to be centered. </td> </tr></TABLE> Because table is more time-consuming, you can also use DIV instead of table, as follows:
Html:
<div class="something-semantic"> <div class="something-else-semantic"> Unknown stuff to be centered. </div></div>
Css:
.Something-Semantic{Display:Table; Width: 100%;}.-else-semantic { Display: Table-cell; Text-align : Center; Vertical-< Span class= "PLN" >align: Middle; /span> Method Three, the ultimate solution:
The above 2 methods may have their limitations, I introduced the third method is relatively mature is not fixed high-width div Vertical Center Method! But the method is CSS3, want to be compatible with IE8 children's shoes, suggest using the above Method!
The method is almost the same as our fixed height, but without margin we use translate ()
The demo is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > xmlns="Http://www.w3.org/1999/xhtml" Xml:lang="EN"> <meta Http-equiv="Content-type" Content="Text/html;charset=utf-8"> <title>Haorooms not fixed height div notation</title> <style>.Center{Position: Fixed;Top: 50%;Left: 50%;Background-Color: #000;Width:50%;Height: 50%;-webkit-transform< Span class= "pun" >: Translatex (-50%) Translatey (-50%); } </style></ Head><body> <div class= "center" > </div></body> My CSS above is only for the WebKit kernel browser, the other kernel browser is written as follows:
-Webkit-Transform:TranslateX(-50%)Translatey(-50%);-Moz-transform: Translatex (- 50%) Translatey (-50< Span class= "pun" >%); -ms-transform : Translatex (-50%) Span class= "PLN" > Translatey (-50%); : Translatex (-50 %) Translatey (-50%); For each browser's wording, you can look at one of my previous articles: Http://www.haorooms.com/post/css_common
Some styles of pop-up layers can also be centered with this method
Position: Fixed;Top: 50%;Left: 50%;Width: 50%;Max-Width: 630px;Min-Width: 320px;Height: Auto;Z-Index: 2000;Visibility:Hidden;-Webkit-Backface-Visibility:Hidden;-Moz-Backface-Visibility:Hidden;Backface-Visibility:Hidden;-Webkit-Transform:TranslateX(-50%)Translatey(-50%);-Moz-transform: Translatex (- 50%) Translatey (-50< Span class= "pun" >%); -ms-transform : Translatex (-50%) Span class= "PLN" > Translatey (-50%); : Translatex (-50 %) Translatey (-50%); As long as three words can realize the indefinite wide high level vertical center.
justify-content:center;//子元素水平居中align-items:center;//子元素垂直居中display:-webkit-flex;
Adding the above 3 sentences to the parent element allows the child element to be horizontally vertically centered.
Several ways to center vertically (go)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
