欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS--几种常用的水平垂直居中对齐方法

程序员文章站 2022-06-19 10:28:27
CSS 几种常用的水平垂直居中对齐方法 [Toc] 文字的水平垂直居中 元素的水平垂直居中 1 使用绝对定位 2 使用绝对定位+ calc() 3. 使用绝对定位+transform 4. 使用display:flex; ......

css--几种常用的水平垂直居中对齐方法

文字的水平垂直居中

    text-align: center;
    line-height: 单前元素高度;

元素的水平垂直居中

1 使用绝对定位

   /* 需要固定宽高 */
    position: absolute;
    top:0;
    left: 0;
    bottom: 0;
    right: 0;
    width: xxx;
    height: xxx
    margin: auto;

2 使用绝对定位+ calc()

    /* 需要知道具体的元素宽高值 */
    position: absolute;
    width: xxx;
    height: xxx;
    top: calc(50% - xxx/2);
    left: calc(50% - xxx/2)

3. 使用绝对定位+transform

   /* 不需要知道元素的宽高 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

4. 使用display:flex;

    display: flex;
    justify-content: center;
    align-items: center;