CSS居中实现完整攻略

标签：play   content   使用   cell   table   inline   元素   ddl   lock   

水平居中：

1） 行内元素解决方案

只需要把行内元素包裹在一个属性display为block的父层元素中，并且把父层元素添加如下属性即可：text-align: center

适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，inline-flex）

2）块状元素解决方案

对于块状元素（display:block）来说，我们需要将它的左右外边距（即，margin-left，margin-right）设置为auto，即可实现块状元素的居中，如下：

.center{
/* 这里可以设置顶端外边距 */
margin: 10px auto;
}

3）多个块状元素解决方案

如果页面里有多个块状元素需要水平排列居中，可以将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可实现。

4）水平居中：多个块状元素解决方案 (使用flexbox布局实现)

使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可

5）垂直居中：单行的行内元素解决方案

当一个行内元素，即inline，inline-*类型的元素需要居中的话，可以将它的height和line-height同时设置为父元素的高度即可实现垂直居中效果。

#container{
  background: #222;
  height: 200px;
}
/*  以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
a{
  
  height: 200px;
  line-height:200px;  
  color: #FFF;
}

6）垂直居中：多行的行内元素解决方案

组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果，如下：

.container{
  background: #222;
  width: 300px;
  height: 300px;
  /* 以下属性垂直居中 */
  display: table-cell;
  vertical-align:middle;
}

CSS居中实现完整攻略

标签：play   content   使用   cell   table   inline   元素   ddl   lock   

原文地址：http://www.cnblogs.com/dhuhewang/p/6529729.html