Topic Center

Contact Sales

Home > Developer > Web Develop

CSS elements are centered vertically

Last Update:2016-01-30 Source: Internet

Author: User

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

First, the CSS element is centered vertically in the initial state

<! DOCTYPE html>
    <meta charset= "UTF-8" >
    <TITLE>CSS Element Vertical Center </title>
    <style type= "Text/css" >
        . wrapper{
            Background-color: #f24444;
            width:200px;
            height:200px;
            margin:0px Auto;


            Text-align:center;
        }
      /*  . content{
            line-height:200px;
        }*/
    </style>
<body>
<div class= "wrapper" >
    <div class= "Content" > Nothing is difficult, I'm afraid of a conscientious. </div>
</div>
</body>

Two, 1, line-height text Vertical Center
. content{
    line-height:200px;
}
2, line-height picture Vertical Center
<! DOCTYPE html>
    <meta charset= "UTF-8" >
    <TITLE>CSS Element Vertical Center </title>
    <style type= "Text/css" >
        . wrapper{
            Background-color: #f24444;
            width:200px;
            height:200px;
            margin:0px Auto;
            Text-align:center;
        }
        . content{
            line-height:200px;
        }
        . Content img{
            Vertical-align:middle;

        }
    </style>
<body>
<div class= "wrapper" >
    <div class= "Content" ></div>
</div>
</body>

Three, table method Vertical Center
<! DOCTYPE html>
    <meta charset= "UTF-8" >
    <TITLE>CSS Element Vertical Center </title>
    <style type= "Text/css" >
        . wrapper{
            Background-color: #f24444;
            width:200px;
            height:200px;
            margin:0px Auto;
            Text-align:center;
            display:table;
        }
        . content{
            Display:table-cell;
            Vertical-align:middle;
        }

    </style>
<body>
<div class= "wrapper" >
    <div class= "Content" > Nothing is difficult, I'm afraid to be a conscientious </div>
</div>
</body>

Four, 1, absolute positioning and negative displacement vertical center
. wrapper{
    Background-color: #f24444;
    width:200px;
    height:200px;
    margin:0px Auto;
    Text-align:center;
    position:relative;
}
. content{
    Position:absolute;
    top:50%;
    left:50%;
    height:30%;
    width:50%;
    margin:-15% 0 0-25%;
}
Five, absolute positioning and margin expansion
. wrapper{
    Background-color: #f24444;
    width:200px;
    height:200px;
    margin:0px Auto;
    Text-align:center;
    position:relative;
}
. content{
    Position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:50%;
    height:30%;
    Margin:auto;
}
Six, padding vertical center
. wrapper{
    Background-color: #f24444;
    margin:0px Auto;
    Text-align:center;
    padding:5% 0;
}
. content{
   padding:10% 0;
}
Seven, floating method vertical Center

. wrapper{
    Background-color: #f24444;
    Text-align:center;
    height:250px;
}
. floater{
    Float:left;
    height:50%;
    width:100%;
    margin-bottom:-50px;
}
. content{
   Clear:both;
    height:100px;
}
CSS elements are centered vertically

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

Related Keywords:

how to make div centered in css merge images vertically online flip pdf vertically flip image vertically user centered design book excel writing vertically center horizontally and vertically in excel

Jwt+asp.net MVC timestamp prevents replay attacks 06-30

The difference between a JSON object and a JSON string 03-28

HTTP status code: 301, 302 redirect 09-26

HTTP returns the difference between 301 and 302 in the status... 08-06

About HTTP return Codes 301, 302 differences with SEO 03-17

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.

What's Trending

Top 10 Tags

datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling

Top 10 Keywords

microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

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

CSS elements are centered vertically

Contact Us

What's Trending

Top 10 Tags

Top 10 Keywords

Trending Topic

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support