秋招面试题之水平垂直居中

2018-08-31

常见的几种居中布局。

水平居中:

1、块级元素内的内联元素水平居中：text-align:center

2、块级元素水平居中：margin:0 auto

3、flex布局：display:flex;justify-content: center;

垂直居中：

1、内联元素：设置内联元素的高度(height)和行高(line-height)相等

2、*多行元素，利用表布局：父元素设置display:table，子元素display: table-cell;vertical-align: middle;

3、多行元素，flex布局：父元素设置：

display: flex;
flex-direction: column;
justify-content: center;

4、固定高度的块级元素垂直居中

width: 200px;
height: 200px;
background: pink;
position: absolute;
top: 50%;
margin-top: -100px;

5、未知高度的块级元素垂直居中

position: absolute;
top: 50%;
transform: translateY(-50%);
background: pink;

水平垂直居中：

1、固定宽高

position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
background: pink;

2、未知宽高

  position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: pink;

3、flex

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