How to realize the upper and lower center of content in div
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!
