By

文章目录
  1. 1. 水平居中
    1. 1.1. 子元素是inline 或者 inline-* 元素
    2. 1.2. 子元素是block元素
    3. 1.3. 子元素是多个block 元素
  2. 2. 垂直居中
    1. 2.1. 子元素是像text或links 的inline 或 inline-* 单个元素
    2. 2.2. 子元素是像text或links 的inline 或 inline-* 多行元素
    3. 2.3. 子元素是一个块级元素
  3. 3. 既有水平居中又有垂直居中
    1. 3.1. 子元素有固定的宽和高
    2. 3.2. 子元素有未知的宽和高
    3. 3.3. 使用flex
  4. 4. 翻译文献

    这里记录的是在练习百度的2016IFE任务时的笔记之二。这里主要是css中的水平和垂直的的居中问题。

这篇文章是我对this的翻译。

水平居中

子元素是inline 或者 inline-* 元素

在父元素上使用 text-align:center;

子元素是block元素

用margin:0 auto 外加 block 的宽度

子元素是多个block 元素

  1. 将子元素变成inline-block形式，并在父元素上使用text-align:center;
  2. flex 
    1
    2
    3
    4
    .parent{
        display: flex ;
        justify-content: center;
    }

垂直居中

  1. 设置子元素的padding-top 与padding-bottom

  2. 若不能使用padding，可以在父元素上面使用line-height属性

    1
    2
    3
    4
    5
    .parent {
         height：100px;
         line-height:100px;
         white-space:nowrap;  
      }

    即使子元素的行高等于父元素的高度，这样自然就居中了。

  1. 可以使用padding-top 或者padding-bootom但当元素在table cell 中时，是不管用的，这时可以用vertical-align.
    demo1: 
    1
    2
    3
    4
    5
    6
    7
    <table>
    <tr>
        <td>
        I'm vertically centered multiple lines of text in a real table cell.
        </td>
    </tr>
    </table>
1
2
3
4
5
6
7
8
9
table {
margin: 20px;
height: 250px;
}
table td {
padding: 20px;
/* default is vertical-align: middle; */
}

demo2:

1
2
3
<div class="center-table">
  <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
.center-table {
display: table;
height: 250px;
width: 240px;
margin: 20px;
}
.center-table p {
display: table-cell;
margin: 0;
padding: 20px;
vertical-align: middle;
}

  1. flex 

    1
    2
    3
    4
    5
    6
    .parent{
        display: flex;
        flex-direction: column;
        justify-content: center;
        height:200px;/*设置父容器高度才可以有相对值进行定位*/
    }

  2. 使用伪元素：将一个全部高度的伪元素放在父容器中，将显示的高度进行inline-block,并使用vertical进行对齐

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .parent{
        relative
    }
    .parent ::before{
        content:"",
        display:inline-block;
        height: 100%;
        width:1%;
        vertivcal-align:middle;
    }
    .child{
        display:inline-block;
        vertical-align : middle;
    }

子元素是一个块级元素

  1. 知道子元素的高度

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .parent {
        position:relative;
    }
    .child {
        position:absolute;
        top:50%;
        height:100px;
        padding:20px;
        margin-top：-70px;// 50+20  
    }

  2. 不知道子元素的高度

    1
    2
    3
    4
    5
    6
    7
    8
    .parent {
        position:relative;
    }
    .child  {
        position: absolute;
        top:50%;
        transform : translateY(-50%);
    }

  3. 使用flex

    1
    2
    3
    4
    5
    .parent {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

既有水平居中又有垂直居中

子元素有固定的宽和高

较好的兼容性方法： 将元素50%、50% 进行absolute 定位之后，使得margin为负的宽高值的一半

1
2
3
4
5
6
7
8
9
10
11
12
  .parent{
    position:relative;
  }
.child {
    width: 300px;
    height: 100px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -70px 0 0 -170px;
}

子元素有未知的宽和高

将元素50%、50% 进行absolute 定位之后，使用tansform的translate属性 来根据元素的宽高的一半进行设置

1
2
3
4
5
6
7
8
9
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

使用flex

1
2
3
4
5
.parent {
  display: flex;
  justify-content: center;
  align-items: center;/*设置交叉轴对齐方式，可以垂直移动主轴*/
}

翻译文献

  1. Centering in CSS: A Complete Guide
文章目录
  1. 1. 水平居中
    1. 1.1. 子元素是inline 或者 inline-* 元素
    2. 1.2. 子元素是block元素
    3. 1.3. 子元素是多个block 元素
  2. 2. 垂直居中
    1. 2.1. 子元素是像text或links 的inline 或 inline-* 单个元素
    2. 2.2. 子元素是像text或links 的inline 或 inline-* 多行元素
    3. 2.3. 子元素是一个块级元素
  3. 3. 既有水平居中又有垂直居中
    1. 3.1. 子元素有固定的宽和高
    2. 3.2. 子元素有未知的宽和高
    3. 3.3. 使用flex
  4. 4. 翻译文献