利用css实现元素的上下左右居中

前言：关于text-align:center和文字通过height与line-height实现的方式就不再赘述

1.未知元素宽高

方法一：

代码实例：

html==>

<div class="table">
    <div class="father">
      <div class="son">
        子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子
        元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中
      </div>
    </div>
  </div>

css==>

    * {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.table {
		display: table;
	}
	.father {
		height: 400px;
		border: 1px solid red;
		display: table-cell;
		vertical-align: middle;
	}
	.son {
		margin: auto;
		border: 1px solid blue;
	}

效果：

---

方法二：

代码实例

html==>

<div class="table">
    <div class="father">
      <div class="child">
        子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中
      </div>
    </div>
</div>

css==>

.father {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 300px;
    width: 400px;
    background: yellow;
    color: red;
  }
  .child {
    border: 1px solid red;
  }

 

效果图如下：

注：最为推荐的方法（但是请注意浏览器的兼容性）

---

2.已知元素的宽高

方法一：

代码实例

html==>

<div class="table">
    <div class="father">
      <div class="child">
        子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子元素居中子
      </div>
    </div>
</div>

css==>

  .father {
    width: 500px;
    height: 600px;
    border: 1px solid blue;
    position: relative;
  }

  .child {
    position: absolute;
    width: 200px;
    height: 300px;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -150px;
    border: 1px solid red;
  }

效果演示：

 

方法二：

.father {
    position: relative;
    width: 500px;
    height: 500px;
    border: 1px solid red; 
 }
.child{
    position: absolute;
    width: 200px;
    height: 200px;
    /*top、bottom、left和right 均设置为0*/
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /*margin设置为auto*/
    margin:auto;
    border: 1px solid green;    
}

效果图：

  

 

 

未完，待续（会继续总结）