简介： 平时工作中开发经常会遇到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;//去除段落元素自带的margin
    line-height:500px;
}
# css3 # 前端 # css # html # webview
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

解锁HDC 2024之旅：从购票到报名，全程攻略

avatar 华为云开发者联盟
cover

从原始边列表到邻接矩阵Python实现图数据处理的完整指南

avatar 华为云开发者联盟
cover

华为云云原生FinOps解决方案，释放云原生最大价值

avatar 华为云开发者联盟