先写上html代码，如图，内容很简单，就是一个div里有一段文本。
02再写上div对应的样式，如图，这里只设置了div的边框和高度，宽度。
03如果这里显示的话，我们看下页面，文本是不会水平居中和垂直居中的。
04要让文本水平居中，我们可以添加样式：text-align: center
要让文本垂直居中，我们可以添加样式： vertical-align: middle和display: table-cell
05添加完这几个样式后，刷新页面可以看到现在的文本已经可水平居中和垂直居中了。
这样：
body{ margin:0padding:0width:100%
height:100%
} div{ position:absolutetop:50%left:50%margin-top:-250px margin-left:-250px/*此时宽和高都要固定*/ width:500pxheight:500px} body{
margin:0
padding:0
width:100%
height:100%
}
div{
position:absolute
top:50%
left:50%
margin-top:-250px
margin-left:-250px
/*此时宽和高都要固定*/
width:500px
height:500px
}
扩展资料：注意事项
一、用两个值就可以了
1、text-align:center
//这是让文字左右居中
2、line-height:100px
//这是让文字垂直居中
vertical-align:middle
//这个属性不能让文字垂直居中，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
二、多行文本垂直居中分为两种情况，一个是父级元素高度不固定，随着内容变化；另一个是父级元素高度固定。
1、父级元素高度不固定
父级高度不固定的时，高度只能通过内部文本来撑开。可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：
<!--html代码-->
<div id="div1">
这是多行文本垂直居中，
这是多行文本垂直居中，
这是多行文本垂直居中，
这是多行文本垂直居中。
</div>
/*css代码*/
#div1{
width: 300px
margin: 50px auto
border: 1px solid red
text-align: center/*设置文本水平居中*/
padding: 50px 20px
}
2、父级元素高度固定
只对拥有valign特性的元素才生效，结合display: table，可以使得div模拟table属性。因此可以设置父级div的display属性：display: table；然后再添加一个div包含文本内容，设置其display:table-cell和vertical-align:middle。
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>水平+垂直居中</title>
<style type="text/css">
div {
font-family: "microsoft yahei"
border: 5px solid #cce800
}
.container {
width: 600px
padding: 10px
margin: 10px auto
background-color: gray
}
.vertical {
display: table-cell
height: 400px
padding: 5px
text-indent: 2em
vertical-align: middle
background-color: #cce8cf
border-radius: 5px
}
</style>
</head>
<body>
<!-- 外层这个是为了实现水平居中 -->
<div class="container">
<div class="vertical">
测试垂直居中,即便是多行，我也还是垂直居中对齐的。
<h3>问题分析：</h3>
<p>1.CSS中vertical-align这个属性只是对行级元素生效，div是块级元素，所以即使设置了此属性也不会生效。</p>
<p>2.Div可以通过display属性中的table-cell值由块级元素变为行级元素（这里你可以理解为Excel里的单元格），这样就支持vertical-align的垂直居中了。</p>
<p>3.扩张一点：如果是行级元素(例如span)，也可以通过把height和line-height设置为相同值，这样也可以实现垂直居中，不过不符合你的要求，你了解即可。</p>
</div>
</div>
</body>
</html>下边是运行出来的效果：
问题分析：
1.
CSS中vertical-align这个属性只是对行级元素生效，div是块级元素，所以即使设置了此属性也不会生效。
2.
Div可以通过display属性中的table-cell值由块级元素变为行级元素（这里你可以理解为Excel里的单元格），这样就支持vertical-align的垂直居中了。
3.
扩展一点：如果是行级元素(例如span)，也可以通过把height和line-height设置为相同值，这样也可以实现垂直居中，不过不符合你的要求，你了解即可。
另外哥推荐你用sublime写前端代码，灰常不错的一款编辑器，骚年，哥能帮你的就这么多了，剩下自己努力吧。
