Method Summary of vertical center of content in div, vertical center of div

Source: Internet
Author: User

Method Summary of vertical center of content in div, vertical center of div
I. line-height Method

If only one or several lines of text are vertically centered, it is the easiest to create, as long as the line height of the text is the same as the height of the container. For example:

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

This code can align the text vertically in a paragraph.

Ii. padding method

Another method is similar to the line height method. It is also suitable for vertical center of one or several lines of text. The principle is to use padding to vertically center the content, for example:

p { padding:20px 0; }

This code is similar to the line-height method.

Iii. Table Simulation

Set the container to display: table, set the sub-element, that is, the element to be vertically centered to display as display: table-cell, and add vertical-align: middle.

The html structure is as follows:

<Div id = "wrapper"> <div id = "cell"> <p> test vertical center Effect Test vertical center effect </p> <p> test vertical center Effect Test vertical center Effect center effect </p> </div>

Css code:

#wrapper {display:table;width:300px;height:300px;background:#000;margin:0 auto;color:red;}#cell{display:table-cell; vertical-align:middle;}

Implementation:

Unfortunately, IE7 and below are not supported.

IV. Implementation of CSS3 transform

The css code is as follows:

 
.center-vertical{  position: relative;  top:50%;  transform:translateY(-50%);}.center-horizontal{  position: relative;  left:50%;  transform:translateX(-50%); }
V. The box method of css3 achieves horizontal and vertical center

Html code:

<Div class = "center"> <div class = "text"> <p> I am a multiline text </p> <p> I am a multiline text </p> </div>

Css code:

.center {  width: 300px;  height: 200px;  padding: 10px;  border: 1px solid #ccc;  background:#000;  color:#fff;  margin: 20px auto;  display: -webkit-box;  -webkit-box-orient: horizontal;  -webkit-box-pack: center;  -webkit-box-align: center;    display: -moz-box;  -moz-box-orient: horizontal;  -moz-box-pack: center;  -moz-box-align: center;    display: -o-box;  -o-box-orient: horizontal;  -o-box-pack: center;  -o-box-align: center;    display: -ms-box;  -ms-box-orient: horizontal;  -ms-box-pack: center;  -ms-box-align: center;    display: box;  box-orient: horizontal;  box-pack: center;  box-align: center;}

Result

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.