div vertical align middle css

问题:

I\'m trying to get my text to vertically align to the middle of the div of the abc div only.

I want to keep the height at 50px and text to align vertically in the middle of the div.

I\'ve yet to find a solution to this problem, maybe I\'m not searching the right things.

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}

<div id=\"main\">
 <div id=\"abc\">
     asdfasdfafasdfasdf
 </div>
</div>

回答1:

You can use line-height: 50px;, you won\'t need vertical-align: middle; there.

Demo

---

The above will fail if you\'ve multiple lines, so in that case you can wrap your text using span and than use display: table-cell; and display: table; along with vertical-align: middle;, also don\'t forget to use width: 100%; for #abc

Demo

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

#abc span {
  vertical-align:middle;
  display: table-cell;
}

---

Another solution I can think of here is to use transform property with translateY() where Y obviously stands for Y Axis. It\'s pretty straight forward... All you need to do is set the elements position to absolute and later position 50% from the top and translate from it\'s axis with negative -50%

div {
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;
}

p {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Demo

Note that this won\'t be supported on older browsers, for example IE8, but you can make IE9 and other older browser versions of Chrome and Firefox by using -ms, -moz and -webkit prefixes respectively.

For more information on transform, you can refer here.

回答2:

It\'s simple: give the parent div this:

display: table;

and give the child div(s) this:

display: table-cell;
vertical-align: middle;

That\'s it!

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

<div class=\"parent\">
    <div class=\"child\">
        Test
    </div>
    <div class=\"child\">
        Test Test Test <br/> Test Test Test
    </div>
    <div class=\"child\">
        Test Test Test <br/> Test Test Test <br/> Test Test Test
    </div>
<div>

回答3:

Old question but nowadays CSS3 makes vertical alignment really simple!

Just add to #abc the following css:

display:flex;
align-items:center;

Simple Demo

Original question demo updated

Simple Example:

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}

<div class=\"vertical-align-content\">
  Hodor!
</div>

回答4:

I found this solution by Sebastian Ekström. It\'s quick, dirty, and works really well. Even if you don\'t know the parent\'s height:

.element {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Read the full article here.

回答5:

You can use Line height a big as height of the div. But for me best solution is this --> position:relative; top:50%; transform:translate(0,50%);

回答6:

How about adding line-height ?

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
  line-height: 45px;
}

Fiddle, line-height

Or padding on #abc. This is the result with padding

Update

Add in your css :

#abc img{
   vertical-align: middle;
}

The result. Hope this what you looking for.

回答7:

Try this:

.main_div{
    display: table;
    width: 100%;
}
.cells {
    display: table-cell;
    vertical-align: middle;
}

Another method for centering a div:

<div id=\"parent\">
    <div id=\"child\">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 100px;
    margin: auto;
}

回答8:

This Code Is for Vertical Middle and Horizontal Center Align:

.parent-class-name {
  position: relative;
}

.className {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}