css3文子垂直居中

CSS3是一种基于样式的标记语言，它可以使网页的样式变得更加丰富和美观。在使用CSS3时，垂直居中文本是一个常见的问题。下面介绍几种方法实现文本垂直居中。

方法一：使用Flex布局.container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.container p {
    margin: 0;
}
    

这种方法是使用Flex布局，容器设置display:flex; align-items:center; justify-content:center; 即可实现垂直居中文本。注意设置p标签的margin为0，否则会有一定的偏移。

方法二：使用table-cell布局.container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.container p {
    display: inline-block;
    margin: 0;
}
    

这种方法使用table-cell布局，容器设置display:table-cell; vertical-align:middle; text-align:center; 即可实现垂直居中文本。p标签设置display:inline-block; margin:0; 即可。

方法三：使用绝对定位和transform.container {
    position: relative;
}
.container p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
    

这种方法使用绝对定位和transform，容器设置position:relative; p标签设置position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); 即可实现垂直居中文本。这种方法兼容性比较好，但需要注意父容器的大小。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！