css设置元素水平垂直都居中显示

css设置元素水平垂直都居中显示

• 1. 知道元素大小的情况

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

• 2. css3中不确定元素大小的情况

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

• 3. margin:auto实现绝对定位元素的居中(上下左右均0位置定位；margin: auto)

    width: 600px; height: 400px;
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */

• 4. 使用 flex布局, 在父元素中写下面的代码子元素就会居中显示了

  <div class="outer">
    <div class="inner"></div>
  </div>

.outer
    width:100%;
    height:100%;
    background:#eee;
    display:flex;
    justify-content: center;
    align-items: center;
}
.inner{
    width:300px;
    height:300px;
    background: #fff;
    border:1px solid #ccc;
}