div percent vertically centered in CSS several methods

Last Update:2017-01-13 Source: Internet

Author: User

Tags visibility xmlns

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

Objective

We all know, fixed high width div in the Web page vertical Center is very simple, I believe you can easily write out, but not fixed high width div How vertical center it? We are in the Web page layout, especially mobile phones and other web pages are often not fixed high width div, then how are these div vertically centered? This article, I summarize.

Fixed high width div Vertical center

As shown above, the fixed height of the width is very simple, the following wording:

The code is as follows	Copy Code
Position:absolute; left:50%; top:50%; width:200px; height:100px; margin-left:-100px; margin-top:-50px;

The method of vertically centering the high width div without fixing

Method One:

With a "ghost" pseudo Element (invisible artifact) 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 code is as follows

Copy Code

HTML is as follows:

<div class= "centered" >
<p>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>
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:50%;
}

Method Two:

You can use the table layout method, but this method also has limitations!

The

The code is as follows

Copy Code

is worded as follows:

<table Style= "width:100%;"
<tr>
     <td style= "text-align:center; vertical-align:middle;"
          Unknown stuff to be centered.
   & nbsp </td>
</tr>
</table>
Because table writing 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;< br>    width:100%;
}
. something-else-semantic {
   display:table-cell;
   text-align:center;
& nbsp; Vertical-align:middle;
}

Method Three, the ultimate solution:

The above 2 methods may have its limitations, I introduced the third method is more mature is not fixed high width div Vertical Center Method! But the method is CSS3, want to compatible with IE8 children's shoes, suggest using the above Method!

The method is similar to our fixed height and width, but without margin we use the translate ()

The code is as follows

Copy Code

Demo as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<meta http-equiv= "Content-type" content= "Text/html;charset=utf-8" >
<title>haorooms Height Div </title>

</style>
<body>
<div class= "center" ></div>
</body>
My CSS above is just for the WebKit kernel browser, and other kernel browsers are written as follows:

-webkit-transform:translatex ( -50%) Translatey (-50%);
-moz-transform:translatex ( -50%) Translatey (-50%);
-ms-transform:translatex ( -50%) Translatey (-50%);
Transform:translatex ( -50%) Translatey (-50%);

Some styles of pop-up layers can also be centered in this way

The code is as follows

Copy Code

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%);
-ms-transform:translatex ( -50%) Translatey (-50%);
Transform:translatex ( -50%) Translatey (-50%);

Method Four, the vertical center of multiple lines of unknown height text

If a piece of content, its height is variable, then we can use the previous section of the implementation of the horizontal center to use the last method, is to set the padding, so that the upper and lower
Padding values are the same. Similarly, this is a "looking" vertical center, which is simply a kind of Shantiu that makes text fill <div> completely. You can use the same
The code for the face:

The code is as follows	Copy Code
div { padding:25px; }

The advantage of this approach is that it can be run on any browser, and the code is simple, except that the application of this method is based on the premise that the height of the container must be scalable.

The code is as follows

Copy Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title> multi-line text to center vertically </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<style type= "Text/css" >
body {font-size:12px;font-family:tahoma;}
div {
padding:25px;
border:1px solid #FF0099;
Background-color: #FFCCFF;
width:760px;
}
</style>
<body>
<div><pre> now we want to make this text vertically centered!
div {
padding:25px;
border:1px solid #FF0099;
Background-color: #FFCCFF;
}
</pre></div>
</body>

All right, here's the example about div centered, you can choose your own.

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.

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