方法一：

水平居中

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

text-align=left; 左对齐

text-align=right; 右对齐

text-align=justify; 两端对齐

text-align=center; 水平居中

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

 

垂直居中

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

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

 

举例：让一个<p>水平垂直居中

代码：

div {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

 

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

 

 

方法二：

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

代码：

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

 

方法三：

使用flex流布局

div{
    display:flex;
    justify-content:center;
    align-items:center;
}

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

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

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

 

版权声明：本文为cff2121原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/cff2121/p/10839320.html