html元素居中

一、不定宽高元素居中

1. table

HTML:

    

        this is content
    


CSS:
.father {
    display: table;
}

.son {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

2. absolute, transform

HTML:

    

        is this OK?
    


CSS:
.father {
    position: relative;
}

.son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

3. css3 flex

HTML:

    

        this is a box fixed in center of screen
The second line
    


CSS:
.father{
    display: flex;
    align-items: center;
    justify-content: center;
}

4. :before和display:inline-block

HTML:

    

        this is a box fixed in center of screen
The second line
    


CSS:
.father {
    text-align: center;
    background-color: red;
}

.father:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.son {
    display: inline-block;
}

• 这里需要注意文字在多行的情况下，新换的一行将起始于:before的下一行，所以会在:before的100%高度下面，导致被顶出.father。但是如果把文字放在.son 里面，再让.son 为inline-block，就可以使.son 和:before处于同一基线，这样就让整个.son 处于垂直居中的状态。

5. vw vh和translate

HTML:

    this is a box fixed in center of screen

CSS:
.inner {
   position:fixed;
   top: 50vh;
   left: 50vw;
   transform: translate(-50%, -50%); 
}

• vh和vw是两个比较偏的单位，是指“viewport的height和width的1%”，比如说50vh就是当前视口（窗口的高度，实验中包含了滚动条）高度的50%。

二、固定宽高元素居中

1. fixed

position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 800px;
height: 400px;

• fixed方案适合在整个窗口实现居中。fixed会使元素脱离网页，因此在内容流中不适用。

2. absolute

position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 350px;

• 绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样。
• 再用transform向左（上）平移它自己宽度（高度）的50%