Case Analysis of content centering up and down in div
Most people do not understand the knowledge points of this "div content up and down center case analysis" article, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "div content up and down center case analysis" article.
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.
The above is about the "div content up and down center case analysis" of this article, I believe we all have a certain understanding, I hope the editor to share the content to help you, if you want to know more related knowledge content, please pay attention to the industry information channel.
