CSS居中

水平居中

1. 针对宽度不为100%的块级元素

margin-left: auto;
margin-right: auto;
或者
margin: 0 auto;

2. 针对行内元素和块级元素的内容。当父元素的宽度是100%时，子元素中的行内元素和内容始终水平居中

text-align: center;

垂直居中

1. 上下padding相等。（容器的高度由内容撑开）
   html结构：

<div class="ct">
  <p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p>
  <p>这是段落</p>
  <p>这是段落</p>
</div>

css：

.ct{
  padding: 40px 0;
  background: pink;
  text-align: center;
  border: 1px solid;
}

实例

2. 绝对定位实现垂直居中（容器内容较为复杂，比如：弹窗）
   html结构：

<div class="dialog">
  <div class="header">我是标题</div>
  <div class="content">我是内容</div>
</div>

css：

.dialog{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -200px;
  margin-top: -150px;
  
  width:400px;
  height: 300px;
  box-shadow: 0px 0px 3px #000;
}

注：以上方法在宽高为定值的条件下使用。宽高发生变化时，margin-left和margin-right需要做出相应修改。
实例
使用CSS3的属性：transform: translate(-50%, -50%);自动偏移本身宽高的50%
将上述css代码修改为：

.dialog{
  position: absolute;
  left: 50%;
  top: 50%;
  /* margin-left: -200px; */
  /* margin-top: -150px; */
  
  transform: translate(-50%, -50%);
  /* width:500px; */
  /* height: 100px; */
  box-shadow: 0px 0px 3px #000;
}

注：上述代码可在宽高不为定值时使用，只是需要浏览器兼容CSS3才能使用。
实例

3. 使用vertical-align(容器内容简单)
   vertical-align：自身基线参考位置。使用对象：行内元素和表格
   html结构：

  <div class="box middle">
    <img src="" alt="">
  </div>

css：

.middle{
    text-align: center;
}
.middle:before{
  content: '';/*行内元素，不能设置宽高*/
  /* content: '小'; */
  /* background: red; */
  display: inline-block;/*可设置宽高*/
  height: 100%;
  vertical-align: middle;
}

实例

4. display: table-cell（改变了元素的display特性）
   html结构：

  <div class="box">
    <img src="" alt="">
  </div>

css：

.box{
  width: 300px;
  height: 200px;
  border: 1px solid ;
  display: table-cell;/*以表格的方式呈现内容*/
  vertical-align: middle;/*表格内元素基线参考位置*/
  text-align: center;
}

实例

5. dispaly:flex
   html结构：

<div class="box">
  <div class="ct"></div>
</div>

css：

.box{
  display: flex;
  height:300px;
  border: 1px solid;
}
.ct{
  height: 100px;
  width: 100px;
  background: red;
  margin: auto;
}

实例
阮一峰网络日志
mdn

6. line-height（单行文本垂直居中）
   只适用于单行文字，line-height值大于等于font-size时使用。line-height值小于font-size时，单行文字会溢出行框，多行文字会发生重叠。
   line-height.png
   实例

文章著作权归本人所有，转载须说明来源