html/css笔记 table表格文本垂直水平居中对齐方法

简介： 平时工作中开发经常会遇到html网页样式设计，这里记录一下笔记方便后期查看，也顺便给其他人提供一个参考

HTML 文本垂直水平居中对齐方法（一）：css样式

水平居中

text-align 应用于块级元素的文本水平居中

text-align=left; 左对齐

text-align=right; 右对齐

text-align=justify; 两端对齐

text-align=center; 水平居中

将块级元素中的内联元素设置为水平居中，并不能使块级元素水平居中

垂直居中

vertical-align应用于行内元素和替换元素，如图像和表单输入元素。

vertical-align不影响块级元素中的内容对齐。但可用于使表单元格中的元素垂直对齐。

vertical-align= middle；垂直居中

    

        

            

                水平垂直居中
            
        
    

效果图：

让图片居中也可以使用同样的方法

HTML 文本垂直水平居中对齐方法（二）：使用flex流布局

justify-content决定元素在主轴上的排布方式，align-items决定元素在交叉轴上的排布方式。

因此：当flex的横向排布时(flex-direction:row)，此时主轴方向为水平方向，交叉轴方向为垂直方向，这时justify-content决定元素在水平方向的排布方式，align-items决定元素在垂直方向的排布方式。

当flex的纵向排布时(flex-direction:column)，此时主轴方向为垂直方向，交叉轴方向为水平方向，这时align-items决定元素在水平方向的排布方式，justify-content决定元素在垂直方向的排布方式。

    


    

        

            

                

                    水平垂直居中二
                
            
        
    

效果图：

 单行文本使用行高实现垂直居中（三）

div{
    text-align:center;//水平居中
    width:500px;
    height:500px;
}
p{
    margin:0;//去除段落元素自带的margin
    line-height:500px;
}