需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：p {border: 1px solid #0b93d5height: 30pxpadding: 10px}。
3、浏览器运行index.html页面，此时每个部分的文字距离上边界和下边界的距离是相等的。
1、利用定位，先给父元素加一个定位属性，比如position:relative，然后给想要居中的元素设置
{position: absolute
top: 0
right: 0
bottom: 0
top: 0
margin: auto
}//这个是上下左右全部居中，如果只是上下垂直居中，可以只设置top和bottom为0，
//left和right根据需要设置一个即可，这个适用于一些不方便计算上下距离的情况
//对于指导上下距离的可以直接使用top，left定位即可
2、vertical-align:middle；属性，该属性是让元素位于父元素的中部。
3、也可以使用css3属性来移动元素，让元素居中
4、或者使用padding值之类的属性来使元素上下垂直居中或者横向居中都可以
方法1 最科学的div display:flex 设置子元素垂直分部居中排列包括兼容代码有点多 网上自己搜吧
方法2 文字外层再包一层div 设置 高度 绝对定位 top 50% margin-top 负高度
缺点就是 div 必须设高度
方法3 外层div 设置 display:table-cellvertical-align: middle
不推荐 因为table-cell 不稳定 而且 语义上很奇怪
方法4 js
