Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to achieve the upper and lower center of content in div". In daily operation, I believe that many people have doubts about how to achieve the upper and lower center of content in div. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt of "how to achieve the upper and lower center of content in div". Next, please follow the editor to study!

Case 1: the div limit is high and the content length is limited to one line.

The code is as follows:

. v-align {

Margin: 0 auto

Width: 200px

Height: 80px

Text-align: center

Line-height: 80px

Border: 1px solid # ddd

}

My content can only have one line.

Case 2: the div limit is high and the content is not limited.

The code is as follows:

. v-mult {

Margin: 0 auto

Width: 200px

Height: 100px

Border: 1px solid # ddd

Overflow: hidden

}

. v-mult .empty

. v-mult .text {

Display: inline-block

* display: inline

* zoom: 1

Vertical-align: middle

}

. v-mult .empty {

Height: 100%

}

My content is unlimited, as high as it is.

Change the line as usual

Case 3: the div height is uncertain, the content height is certain.

The code is as follows:

. v-auto {

Position: relative

Margin: 0 auto

Width: 200px

Border: 1px solid # ddd

}

. v-auto .text {

Position: absolute

Top: 50%

Margin-top:-50px

Height: 100px

Border: 1px dashed # ddd

}

My height is fixed, only as high as 100px, but my father and height are uncertain, how can I center vertically?

Case 4: the height of div is uncertain and the content is highly uncertain.

The code is as follows:

.v-auto-out {

Position: relative

Margin: 0 auto

Width: 200px

Border: 1px solid # ddd

}

.v-auto-out. Auto-in {

Position: absolute

Top: 50%

Border: 1px dashed # ddd

/ * there is a compatibility problem * /

-webkit-transform: translateY (- 50%)

-ms-transform: translateY (- 50%)

-o-transform: translateY (- 50%)

Transform: translateY (- 50%)

}

My height is uncertain, my father and height are also uncertain, now I want to be in the middle, what should I do? Let's take a look.

At this point, the study on "how to achieve the upper and lower center of content in div" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.