Center content in Div summary tutorial

Although the question of the middle and bottom of the div is already an older topic, it has recently been found that many front-end developers are asking how to implement it. In fact, there are already a lot of data and cases on the network, I will summarize some of the more common way of handling.

Case one: div limit high, content length limit Line

The

code is as follows:


<style>


. v-align {


margin:0 Auto;


width:200px;


height:80px;


Text-align:center;


line-height:80px;


border:1px solid #ddd;


}


</style>


<!--HTML-->


<div class= "V-align" > I can only have one row for my content. </div>

Case two: div limit high, content unlimited

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%;


}


<!--HTML-->


<div class= "V-mult" >


<span class= "Empty" ></span>


<span class= "text" > My content is not limited, how high all the line


line as usual </span>


</div>

Case three: div height indefinite, content height must

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;


}


<!--HTML-->


<div class= "V-auto" >


<div class= "text" >


my height is fixed, only 100px high, but my father and height is uncertain, how do I center vertically?


</div>

















</div>

Case FOUR: div height indefinite, content 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;


/* Here is the compatibility issue/* *


-webkit-transform:translatey (-50%);


-ms-transform:translatey (-50%);


-o-transform:translatey (-50%);


Transform:translatey (-50%);


}


<!--HTML-->


<div class= "V-auto-out" >


<div class= "auto-in" > My height is uncertain, my father and height also uncertain, this next to the middle, what should be good? Let's take a look. </div>

















</div>

Well, knowing these four ways, I'm sure it's enough to deal with all kinds of vertical centering problems in daily work. The code is very simple, no longer redundant elaboration. In a word, the various attributes of CSS style, just like the body of each organ, understand the functions of each organ, can cooperate with each other to complete a variety of tasks. On the contrary, the ability of the individual is limited.