CSS实现水平垂直居中的几种方法

水平居中最常用的就是text-align:center; 和 margin:0 auto; 其中text-align:center;是对内部子元素（inline/inline-block）起作用，而margin:0 auto;是对元素自身(block)起作用，具体根据自己的需要适当地运用。

垂直居中常用的有line-height 和 vertical-align:middle，但是它们都有使用的限制条件或者前提吧。比如line-height得和height一样高，vertical-align:middle 只对inline-block起作用，但其实还有很多坑，个人不怎么喜欢使用vertical-align。

下面我们就直接进入水平垂直居中的讨论吧：

其实吧，水平垂直居中也是有两种情况：知道宽高 和 不知道宽高。

一、已知宽高的水平垂直居中

在这种情况下，其实就很好解决了，实例说明一下：

html代码：

<div class="wrap">
   <div class="child">水平垂直居中</div>
</div>

默认样式：

.wrap{
  width:400px;
  height:400px;
  border:1px solid red;
  margin:0 auto;
}
.child{
  width:200px;
  height:200px;
  background:#ccc;
}

现在的情况是这样的：

因为我们是已知宽高的，所以可以给子元素加外边距挤到中间位置，或者通过绝对定位到中间位置，当然还有一些方法，我就放在未知宽高的情况下再介绍，因为已知宽高包含于未知宽高，所以为了避免重复，我就分开了，这里就只讲仅适合已知宽高的情况。

我们给子元素加上外边距：

.child{
  margin-top:100px;
  margin-left:100px;
}

这时内部子元素就水平垂直居中了。

现在使用绝对定位来实现：

.wrap{
  position:relative;
}
.child{
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-100px;
  margin-left:-100px;
}

貌似绝对定位比较麻烦，但其实绝对定位对整体布局更好一些，也是比较常用。

二、未知宽高的水平垂直居中

1、绝对定位+css3 transform:translate(-50%，-50%)

.wrap{
  position:relative;
}
.child{
  position: absolute;
  top:50%;
  left:50%;
  -webkit-transform:translate(-50%,-50%);
}

2、css3 的flex布局

.wrap{
  display:flex;
  justify-content:center;
}
.child{
  align-self:center;
}

3、table布局

<div class="wrap">
   <div class="child">
          <div>sadgsdgasgd</div>
   </div>
</div>

.wrap{
  display:table;
  text-align:center;
}
.child{
  background:#ccc;
  display:table-cell;
  vertical-align:middle;
}
.child div{
    width:300px;
    height:150px;
    background:red;
    margin:0 auto;
}

table布局貌似得多套一层，试了好多遍，两层都出不来效果。但是这种html结构太冗余了。所以前两种比较新潮一些。

OK，水平垂直居中就讲到这里，以上都是自己琢磨的一些方法，有什么纰漏或者不恰当的地方，欢迎留言指正。

本文转载自：https://www.cnblogs.com/jr1993/p/4788718.html

更多web开发知识，请查阅 HTML中文网 ！！

以上就是CSS实现水平垂直居中的几种方法的详细内容，更多请关注0133技术站其它相关文章！