一.使div水平垂直居中。 1 .在不知道div宽度和高度的情况下，采用绝对布局，使left和top均为50%。 这是因为在水平方向上div的最左边距离屏幕的最左边50%，在垂直方向上相同，所以用transform只向左偏移自己的宽度(高度)的50 )
. center { position: absolute； top: 50%； left: 50%； /*-webkit表示对safari浏览器的支持，-ms表示对IE浏览器的支持//- WebKit-transform 3360 translate (-50 %、-50% )； - ms-transform 3360 translate (-50 %、-50%； transform:translate(-50%、-50%； } 给div添加.center类，可实现任意元素水平+垂直居中
效果：
2 .方法2 div仍然使用绝对布局设置边距：自动； top、left、right和bottom的值设定为相等即可，不一定需要为0
. center {文本对齐： center； /*div内部字符居中*/border: solid 2px lightblue； border-radius: 20px； width: 300px； height: 350px； 边距：自动； 定位：助手； top: 0； left: 0； right: 0； bottom: 0； }效果图：
二. div中文字水平垂直居中1. div中文字水平居中div中文字水平居中： text-align: center； 好的
2. div中文字垂直居中2.1单行文字div中垂直居中如果一个容器只有一行文字，居中比较简单，设置它的实际高度height和所在行的高度line-height相等即可。
div { height: 200px； line-height: 200px； border : 1px固态黑； text-align: center/*文本水平居中*/} 2.2 .多行文本固定高度的居中CSS确实具有vertical-align属性，但表格元素的' td '、“
但是，由于CSS具有可以模拟“表”的display属性，因此可以使用该属性使“div”模拟“表”并使用垂直对齐。 请注意显示：表和显示：表单元格的使用方法。 前者必须设置为父元素，而后者必须设置为子元素。 因此，在要放置的文本中添加“div”元素。
style #content { height: 400px； 显示：表； } #contentChild { /*垂直居中*/vertical-align: middle； 显示：表单元格； border : 1px固态黑； width: 800px； }/stylebodydivid=' content ' content divid=' content child ' content child/div/div/body 2.3 .如果内容位于多行未知高度的字符的垂直中心
这种方法的优点是它可以在任何浏览器中运行，并且代码简单。 但是，前提是容器的高度必须是可伸缩的。
style div { padding: 25px； border : 1px固态黑； width: 500px； ) } /stylebody div我是第一行br /我是第二行br /我是第三行br /我是第四行br//div/body 2.4和2.22.3组合起来，综合以上两种方法可以得到完美的解决方案，这里如果要使用CSS Hack区分浏览器，请参阅此处。 简单CSS hack :区分ie 6、IE7、IE8、Firefox和Opera
style div # wrap { display : table； border: 1px solid #FF0099； background-color: #FFCCFF； width: 500px； height: 400px； _position: relative； overflow :隐藏； } div # sub wrap { vertical-align : middle； 显示：表单元格； _position: absolute； _top: 50%； } div # content { _ position : relative； _top: -50%； }/style divid=' wrap ' divid=' sub wrap ' divid=' content '垂直居中显示此文本。 br /现在，让这个文字显示在垂直中央！ /div /div/div原博客来源：
div中文本的垂直居中方法