知识点：居中大盘点

居中大盘点

行内元素

<div>
  <span>element</span>
</div>

基础样式：

div{
  width:300px;
  height:200px;
  background-color:#777;
}

水平居中

text-align

<div>
  <span>element</span>
</div>

div{
  text-align:center;
}

垂直居中

line-height

适用于父元素高度确定的单行文本。
令line-height等于父元素的height

span{
  line-height:200px;

}

vertical-align

一般多行文本使用vertical-align配合display:table-cell来进行垂直居中

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

.center-table {
  display: table; //父元素为table
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.center-table p {
  display: table-cell; //子元素为table-cell
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle; //vertical-align此时能生效
}

或者使用flexbox：

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

---

如果把行内元素的display声明为block，就可以应用块级元素的各个方法。

块级元素

<div class="container">
  <div class="element">element</div>
</div>

基础样式：

.container{
  width:300px;
  height:400px;
  background-color:#777;
}
.element{
  width:100px;
  height:60px;
  background-color:#fff;
}

水平居中

margin水平auto

.element{
  margin:0 auto;
}

垂直水平居中

绝对定位

• 如果元素大小固定，可以利用固定的负margin-top和负margin-left来调整元素位置。

.container{
  position:relative;
}
.element{  
  position:absolute;
  top:50%; 
  left:50%;
  margin-top:-30px;
  margin-left:-50px;
}

• 如果元素大小不固定，利用css3中的transform属性中的translate，可以使元素移动时相对于自身的宽度和高度。

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

• 如果是浮动元素，可以利用相对定位将其居中

.element{
  float:left;

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

---

定位法同样可以做到水平居中和垂直居中，只要仅应用在一个方向上就好。

绝对定位+auto margin

.container{
  position:relative;
}
.element{ 
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
}

flexbox

既可以应用于块级元素也可以应用于行内元素，align-items控制垂直方向，justify-content作用于水平方向。可轻易实现水平居中、垂直居中或水平垂直居中。

.container{  
  display:flex;
  align-items:center;/*垂直居中*/
  justify-content:center;/*水平居中*/
}

或者：

.container{
    display:flex;
}
.element{
    margin:auto;
}