网页垂直水平居中方法总结

web前端开发经常用到的就是使元素在容器里面进行水平垂直居中。相对于垂直居中来说，水平居中或许比较容易。如果是块级元素直接设置其margin:auto即可完成水平居中；如果是内联元素，可以通过display:inline-block(display:block)变成块级元素再进行设置margin值或者通过text-align:center即可使水平居中。若是垂直居中，如果是内联元素，可以设置vertical-align:middle可以使其垂直居中(前提是父容器里面只有一个子元素才生效)。所以下面在平时总结了以下几种垂直居中的方法。

1.最常用的方法，也是日常web前端开发中用得最多的通过设置line-height属性与当前元素的高度值一致，但是缺点就是目前的元素的高度必须设置为固定值，没有了更多的灵活性，先举个例子demo(下面举例的html结构类似):

// html结构
<div class="parent">
    demo 
</div>
// css样式使文本元素垂直水平居中
div.parent{
  width:100px;
  height:100px;
  vertical-align:middle;
  line-height:100px;
}

2.通过绝对定位元素来使元素进行垂直水平居中，缺点就是子元素必须设置固定的宽度高度值且会以最近的一个设置posiiton为relative的父元素进行定位，如果没有这样的父元素，就以body文档为定位:

// html结构
<div class="parent">
  <div class="child">demo</div>
</div>
// css样式
div.parent{
  position:relative;
  width:200px;
  height:200px;
}
div.child{
  position:absolute;
  width:100px;
  height:100px;
  margin:auto;
  left:0;
  top:0;
  bottom:0;
  right:0;
}

3.通过table-cell方法进行定位居中，父元素设置宽高度即可：

// html结构
<div class="parent">
  <div class="child">demo</div>
</div>
// css样式
div.parent{
  display:table;
}
div.child{
  display:table-cell;
  text-aglin:center;
  vertical-align:middle;  
}

4.通过CSS3的弹性盒子模型flex进行布局定位

// html结构
<div class="parent">
  <div class="child">demo</div>
</div>
// css样式
div.parent{
  width:100%;
  height:200px;
  display:flex;
  justify-content:center;
  align-items:center;
}
// 或者直接设置子元素
div.parent{
  width:100%;
  height:200px;
  display:flex;
  justify-content:center;
}
div.child{
  align-self:center;
}

5.通过flex的旧版本进行水平垂直居中对齐(其中box-orient类似于新版的flex-direction)：

// html结构
<div class="parent">
  <div class="child">demo</div>
</div>
// css样式
div.parent{
  width:100%;
  height:200px;
  display:box;
  box-align:center;
  box-pack:center;
}

6.通过绝对定位absolute加margin负值进行居中对齐:

// html结构
<div class="parent">
  <div class="child">demo</div>
</div>
// css样式
div.parent{
  width:100px;
  height:100px;
  position:relative;
}
div.child{
  position:absolute;
  top:50%;
  left:50%;
  right:auto;
  bottom:auto;
  width:50px;
  height:50px;
  margin-left:-25px;
  margin-top:-25px;
}

7.通过CSS3的transform属性的位移值translate来进行水平垂直居中

// html结构
<div class="parent">
  <div class="child">demo</div>
</div>
// css样式
div.parent{
  width:100px;
  height:100px;
  position:relative;
}
div.child{
  position:absolute;
  top:50%;
  left:50%;
  right:auto;
  bottom:auto;
  width:50px;
  height:50px;
  transform:translate(-50%,-50%);
}

8.利用上层元素的浮动来进行垂直居中:

// html结构
<div class="content"></div>
<div class="next">demo</div>
// css样式
div.content{
  height:50%;
  float:left；
  margin-bottom:-120px;
}
div.next{
  clear:both;
  height:240px;
  position:relative;
}

暂时可以想到与可以总结到的有这几种方法，如果有其他的水平垂直居中的方法，欢迎提出。如果有出入，欢迎提出错误所在。

最后编辑于：2020.07.21 18:11:55