css实现居中

 

居中布局

 

• 水平居中
• 行内元素: text-align: center
• 块级元素: margin: 0 auto
• absolute + transform
• flex + justify-content: center
• 垂直居中
• line-height: height
• absolute + transform
• flex + align-items: center
• table
• 水平垂直居中
• absolute + transform
• flex + justify-content + align-items

 

 

两种以上方式实现已知或者未知宽度的垂直水平居中

1

    .wrapper {

        position: relative;

        width: 300px;

        height: 300px;

        background-color: #00000030;

    }

    .wrapper .box {

        position: absolute;

        top: 50%;

        left: 50%;

        width: 100px;

        height: 100px;

        margin: -50px 0 0 -50px;

        background-color: #000;

    }

 

2.

  position: relative;

  top: 0;

  width: 100%;

  height: 100%;

  z-index: 2;

  top: 40%;

  left: 50%;

  transform: translate(-50%, -50%);

  

3

    .wrapper {

        display: flex;

        width: 300px;

        height: 300px;

        display: flex;

        justify-content: center;

        align-items: center;

        background-color: #00000030;

    } 

    .wrapper .box {

        width: 100px;

        /* height: 100px; */        

        height: 100px;

        background-color: #000;

    }