How can make a div vertically center to parent div

2018-06-14 14:11:28

This question already has an answer here:

How to vertically center a div for all browsers? 41 answers

Vertically align an image inside a div with responsive height 10 answers

I will Prefer to use CSS after

This line of CSS will work fine

.main:after{ content: ""; display: inline-block; 
height: 100%; vertical-align: middle; }

Here id the Demo Work

您需要减去要居中的元素高度的一半，因此在这种情况下，请将以下内容添加到.box：

margin-top: -20px;

You can set the box to position: absolute and then set the top and bottom to 0, and then set the margin to auto:

.box {
   position: absolute;
   top: 0;
   bottom: 0;
   margin: auto;
}

Here's an example:

http://jsfiddle.net/SxxWV/23/

链接地址: http://www.djcxy.com/p/41502.html