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

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.

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.