垂直水平居中汇总

 如何使容器里面的内容垂直水平居中呢？

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


.container{
  position: relative;
}
.center {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
   50%;
  height: 50%;
}

如何使内容在视口中垂直水平居中呢？红色是修改的代码

<div class="center"></div>

.center {
    position: fixed;  // 改为fixed
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
     50%;
    height: 50%;
}

如何在内容中腾出点空间，然后再垂直水平居中剩下的空间呢？

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


.container{
  position: relative;
}
.center {
  position: absolute;
  top: 70px;  // 预留出70px的空位
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
   50%;
  height: 50%;
}

如何解决文字溢出问题？

<div class="container">
  <div class="center">Absolute Center,
With Overflow.
This box is absolutely centered within its container, with content set to overflow.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus.

Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum.

Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.</div>
</div>

.container{
  position: relative;
}
.center {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
   50%;
  height: 50%;
  overflow: auto;
}

如何居中图片呢？

<div class="container">
    <img src="http://placekitten.com/g/500/200" class="center"/>
</div>

.container{
  position: relative;
}
.center {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
   50%;
  height: auto; // 设置为auto可以自适应图片的高度。
}

最新且最简单的方法，使用flex居中，但是有的时候需要加浏览器前缀。

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

.container{
  display: flex;
  align-items: center; // 控制cross axis上的对齐方式
  justify-content: center; // 控制main axis上的对齐方式
}
.center {
   50%;
  height: 50%;
}

引用链接