简介： 平时工作中开发经常会遇到html网页样式设计，这里记录一下笔记方便后期查看，也顺便给其他人提供一个参考
HTML 文本垂直水平居中对齐方法（一）：css样式
水平居中
text-align 应用于块级元素的文本水平居中
text-align=left; 左对齐
text-align=right; 右对齐
text-align=justify; 两端对齐
text-align=center; 水平居中
将块级元素中的内联元素设置为水平居中，并不能使块级元素水平居中
垂直居中
vertical-align应用于行内元素和替换元素，如图像和表单输入元素。
vertical-align不影响块级元素中的内容对齐。但可用于使表单元格中的元素垂直对齐。
vertical-align= middle；垂直居中
<table><tr><td style="border:1px solid black;vertical-align: middle;text-align: center;">水平垂直居中</td></tr></table>
效果图：
让图片居中也可以使用同样的方法
HTML 文本垂直水平居中对齐方法（二）：使用flex流布局
justify-content决定元素在主轴上的排布方式，align-items决定元素在交叉轴上的排布方式。
因此：当flex的横向排布时(flex-direction:row)，此时主轴方向为水平方向，交叉轴方向为垂直方向，这时justify-content决定元素在水平方向的排布方式，align-items决定元素在垂直方向的排布方式。
当flex的纵向排布时(flex-direction:column)，此时主轴方向为垂直方向，交叉轴方向为水平方向，这时align-items决定元素在水平方向的排布方式，justify-content决定元素在垂直方向的排布方式。
<style>div{display:flex;justify-content:center;align-items:center;}</style><body><table><tr><td style="border:1px solid black;"><div>水平垂直居中二</div></td></tr></table></body>
效果图：
单行文本使用行高实现垂直居中（三）
div{text-align:center;//水平居中width:500px;height:500px;}p{margin:0;//去除段落元素自带的marginline-height:500px;}
