Do you still remember the center we 've been tossing ?, Centered

Do you still remember the center we 've been tossing ?, Centered

Although the question of content center in div is already an old topic, many front-end developers have recently found that they are asking how to implement it. In fact, there are already a lot of materials and cases on the Internet. I will summarize several common solutions here.

Case 1: The div is limited to a height, and the content length is limited to one row.

1 .v-align {2     margin: 0 auto;3     width: 200px;4     height: 80px;5     text-align: center;6     line-height: 80px;7     border: 1px solid #ddd;8 }

1 <div class = "v-align"> my content can only have one row. </Div>

Case 2: The div is limited to a high level and the content is not limited.

 1 .v-mult { 2     margin: 0 auto; 3     width: 200px; 4     height: 100px; 5     border: 1px solid #ddd; 6     overflow: hidden; 7 } 8 .v-mult .empty, 9 .v-mult .text {10     display: inline-block;11     *display: inline;12     *zoom: 1;13     vertical-align: middle;14 }15 .v-mult .empty {16     height: 100%;17 }

1 <div class = "v-mult"> 2 <span class = "empty"> </span> 3 <span class = "text"> my content is not limited, always high <br> line feed as usual </span> 4 </div>

Case 3: The div height is not fixed, and the content height is fixed.

 1 .v-auto { 2     position: relative; 3     margin: 0 auto; 4     width: 200px; 5     border: 1px solid #ddd; 6 } 7 .v-auto .text { 8     position: absolute; 9     top: 50%;10     margin-top: -50px;11     height: 100px;12     border: 1px dashed #ddd;13 }

1 <div class = "v-auto"> 2 <div class = "text"> 3. My height is fixed and only 100px high, but my parent and height are not fixed, how can I center vertically? 4 </div> 5 <br> 6 </div>

Case 4: The div height is variable and the content height is variable.

1. v-auto-out {2 position: relative; 3 margin: 0 auto; 4 width: 200px; 5 border: 1px solid # ddd; 6} 7. v-auto-out. auto-in {8 position: absolute; 9 top: 50%; 10 border: 1px dashed # ddd; 11/* compatibility issues here */12-webkit-transform: translateY (-50%); 13-ms-transform: translateY (-50%); 14-o-transform: translateY (-50%); 15 transform: translateY (-50% ); 16}

1 <div class = "v-auto-out"> 2 <div class = "auto-in"> my height is variable, and my parent and height are also variable, what should I do if I want to center them up and down? Let's take a look. </Div> 3 <br> 4 </div>

Well, knowing these four methods is enough to cope with various vertical center problems in daily work. The code is very simple and I will not elaborate on it. In a word, each attribute style of CSS is like an organ of a human body. Only by understanding the functions of each organ can we complete various tasks together. On the contrary, individual abilities are limited.

Author blog: http://www.seejs.com