方法一：在此方法中，可以将div的显示方式设置为表，并使用表的垂直对齐属性。
HTML CSS:
1 divclass=' wrapper '2divclass=' cell '3divclass=' content '4h1 div表示方式表/h15/div6/div7/div1. wrapper { displa plav width: 30%； height: 600px； }2. cell {3display : table-cell； 4垂直对齐： middle； 5 )运行效果：
好处：
content可以动态更改高度(不需要在CSS中定义)。 如果wrapper没有足够的空间，则content不会被截断
缺点：
对于Internet Explorer，甚至I E8 beta无效
方法二：该方法使用绝对位置的div，其top设置为50%，top margin设置为负content高度。 也就是说，对象必须在CSS中指定固定高度。
因为有固定高度，所以您可能想在内容中指定overflow :自动。 这样一来，如果内容过多，就会显示滚动条以防止内容溢出。
HTML CSS:
1 div class='content'2对于定位的div，将其top设定为50%，top margin设定为负的content高度。 也就是说，对象必须在CSS中指定固定高度。 3 /div
1 .内容{ 2后台： # 272822； 3定位： Absolute； 4 top:50%； height:440px； width: 500px； 5 margin-top:-220px； /*为高度的一半*/6 }运行效果：
好处：
应用于所有浏览器
不需要嵌套标签
缺点：
如果没有足够的空间，内容将消失。 (如果div位于主体中，用户缩小浏览器窗口时不显示滚动条。)。
方法三：该方法使用定位： Absolute，有一定宽度和高度的div。 此div设置为top:0； bottom:0； 但是，因为它有一定的高度，所以实际上不能把与上下的间隔定为0。 因此，margin:auto； 将被定位在中央。 使用margin :自动； 将块级元素垂直居中很容易。
HTML:
1 div class='content' 2使用position:absolute，该位置具有恒定的宽度和高度的div。 此div设置为top:0； bottom:0； 但是，因为它有一定的高度，所以实际上不能把与上下的间隔定为0。 因此，margin:auto； 将被定位在中央。 使用margin :自动； 将块级元素垂直居中很容易。 3 /div CSS:
1 .内容{2}位置： absolute； 3 top:0； 4 bottom:0； 5 left:0； 6 right:0； 7 margin:auto； 8 height:440px； 9 width:70%； 10后台： # 346 FCE； 11 )运行效果：
好处：
很简单
缺点：
在ie (ie8 beta )中无效
如果没有足够的空间，content将被截断，但不显示滚动条
方法四：该方法只能将单行文本居中。 只需将线高度设置为对象的高度值，即可将文本居中。
HTML:
1名为1 div id='content' 2的方法只能围绕单行文本。 只需将线高度设置为对象的高度值，即可将文本居中。 3 /div CSS:
1 #content {2 margin: 50px auto； 3高清：300 px； 4 line-height:300px； 5后台： # EAA 527； 6 }运行结果：
好处：
应用于所有浏览器
如果没有足够的空间，则无法截断
缺点：
仅对文本有效(块级元素无效) ) ) )。
多行的情况下，断词比较差
对于较小的元素(如按钮文本和单行文本居中)，此方法非常有用。
方法5 :此方法在content元素之外插入div。 该divheight:50%； 玛姬- bottom 3360-content height；
清除内容浮动并将其居中显示。
HTML:
1在1divclass='content'2content元素之外插入div。 该div height:50%； 玛姬- bottom 3360-content height； 清除内容浮动并将其居中显示。 3 /div CSS:
1 .浮动器{ 2浮动：左； 3 height:50%； 4定位： relative； 5 margin-top:-250px； 6 } 7 .content { 8 clear:both； 9 height:500px； 10后台： # 67930 f； 11定位： relative； 12 )运行效果：
好处：
应用于所有浏览器
如果没有足够的空间(例如，窗口折叠)，content不会被截断，而是显示滚动条
缺点：
唯一能想到的就是需要额外的空元素
我个人最喜欢方法3。 使用position:absolute，有一定宽度和高度的div。 此div设置为top:0； bottom:0； 但是，因为它有一定的高度，所以实际上不能把与上下的间隔定为0。 因此，margin:auto； 将被定位在中央。 使用margin :自动； 将块级元素垂直居中很容易。
相对简单，可以垂直居中对齐元素，同时也可以水平居中对齐元素。
对于非块级元素，请将块级元素作为框添加到外部，或者使用display属性将内联元素更改为块级元素，然后使用此方法。
(来自http://www.qianduan.net/CSS-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/)
转载于：https://www.cn blogs.com/red joy/p/4699208.html