css中垂直水平居中的实现方法总结（附代码）

本篇文章给大家带来的内容是关于css中垂直水平居中的实现方法总结（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

最近看到很多面试题目会问：请说出几种使用css完成垂直水平居中的方法？正好看css基础的时候看到一篇文章是讲完全居中的，这边对于文章中的内容做个小结

一、使用absolute(Absolute Centering)

1.1 具体代码如下：

.container {     position: relative; }  .absolute_center {     position: absolute;     top: 0;     right: 0;     bottom: 0;     left: 0;     width: 50%;     height: 50%;     margin: auto;     padding: 20px;     overflow: auto; }

<div class="container">     <div class="absolute_center">         <ul>             <li>                 该方法的核心思想是是使用绝对定位布局，使当前元素脱离正常的流体特性，而使用absolute的流体特性             </li>         </ul>     </div> </div>

1.2 该方法的核心思想是：

这里有两个基本知识点需要知道：

1.流体特性：块状水平元素，如div元素，在默认情况下（非浮动、绝对定位等），水平方向会自动填满外部的容器；如果有margin-left/margin-right, padding-left/padding-right, border-left-width/border-right-width等，实际内容区域会响应变窄；2.absolute流体特性：默认是不具有流体特性的，而是在特定条件下才具有，而这个条件就是"对立方向同时发生定位的时候"，即left与right为水平方向定位，top与bottom为垂直方向定位，而当对立方向同时具有定位数值的时候，absolute的流体特性就发生了。

1.3 优缺点：

优点：

1.兼容性好，absolute流体特性IE7就兼容了，可兼容所有现代浏览器；2.没有额外的标记html元素，样式简单；3.内容的宽度以及高度写法支持使用百分比以及min-/max-写法；4.对图像文件也同样支持；

缺点：

二、负值外补洞法(negative margins)

这可能是目前最常用的方法，在元素的高度以及宽度是固定数值的时候，通过设置该元素为相对布局脱离文档流，并设置top: 50%; left: 50%;，使用margin-left以及margin-top使元素完全居中。

2.1 具体代码如下：

.container {     position: relative;     width: 100%;     height: 100%;     background-color: aliceblue; }  .is-Negative {     position: absolute;     width: 300px;     height: 200px;     padding: 20px;     position: absolute;     top: 50%;     left: 50%;     margin-left: -170px;     margin-top: -120px;     background-color: cornsilk; }

<div class="container">     <div class="is-Negative">     </div> </div>

2.2 该方法的核心思想是：

使用相对布局，并使用top以及left使内容置于容器中心部位，再使用margin来控制偏移量。

这里有有个注意点：

2.3 优缺点：

优点：

缺点：

1.非响应式的，不能配合百分比以及min-/max-使用；2.必须增加overflow属性来阻止如果内容的文本高度超出外层容器时出现的溢出情况；3.当元素使用box-sizing:border-box和使用默认的content-box偏移量是不一样的，需要重新计算；

三、使用Transforms

3.1 具体代码如下：

.container {     position: relative;     width: 100%;     height: 100%;     background-color: aliceblue; }  .is-Transformed {      width: 50%;     margin: auto;     position: absolute;     top: 50%;      left: 50%;     padding: 20px;     -webkit-transform: translate(-50%,-50%);         -ms-transform: translate(-50%,-50%);             transform: translate(-50%,-50%);     background-color: darkseagreen; }

<div class="container">     <div class="is-Transformed">         <ul>             <li>                 该方法的核心思想是使用相对布局，并使用top以及left使内容置于容器中心部位，再使用translate来控制偏移量             </li>         </ul>     </div> </div>

3.2 该方法的核心思想是：

3.3 优缺点：

优点：

缺点：

1.兼容性差了点，由于transform不兼容IE8,所以只支持IE9及其以上的现代浏览器；2.为了兼容各种浏览器，需要些额外的css前缀；3.如果元素有使用transform属性，可能会影响到其他的变换效果；4.在有些时候会出现边缘模糊的情况，这是浏览器渲染的问题，尤其是使用了transform-style: preserve-3d属性的时候

四、使用Table-Cell

这可能是最好的垂直居中的方案，但存在一个最大的问题，需要额外的html元素，要使用table-cell完成垂直居中效果需要3个元素来完成。

4.1 具体代码如下：

.container {   position: relative;   width: 100%;   height: 100%;   background-color: aliceblue; }  .container.is-Table {    display: table;  }  .is-Table .Table-Cell {   display: table-cell;   vertical-align: middle; }  .is-Table .Center-Block {   width: 50%;   margin: 0 auto;   padding: 20px;   background-color: deepskyblue; }

<div class="container is-Table">     <div class="Table-Cell">         <div class="Center-Block">             使用table-cell完成垂直水平居中         </div>     </div> </div>

@import "./absolute_center4.png"{width="50%"}

4.2 该方法的核心思想是：

使用表格来实现垂直居中，再使用margin: 0 auto;来实现水平居中。

具体操作步骤如下：

1.设置父元素为块级表格；2.设置子元素为表格单元格；3.给子元素添加vertical-align:middle属性,此单元格已实现垂直居中；4.设置子元素中的内容的宽度，添加margin: 0 auto;属性，使子元素水平居中。

4.3 优缺点：

优点：

1.内容高度自适应；2.如果子元素的内容溢出，会拉伸父元素的高度；3.兼容性好，兼容到IE8；

缺点：

1.完成一个垂直居中效果，需要3个html元素；

五、使用Inline-block

这也是一种常用的垂直水平居中的方法，但会存在一个问题：当内容的宽度大于容器宽度-0.25em的时候，会发生内容上移到顶部的方法，所以需要一些小的技巧来避免这样的问题。

5.1 具体代码如下：

.container {   position: relative;   width: 100%;   height: 100%;   background-color: aliceblue; }  .container.is-Inline {    text-align: center;   overflow: auto; }  .container.is-Inline:after, .is-Inline .Center-Block {   display: inline-block;   vertical-align: middle; }  .container.is-Inline:after {   content: '';   height: 100%;   margin-left: -0.25em; /* To offset spacing. May vary by font */ }  .is-Inline .Center-Block {   background-color: greenyellow;   padding: 20px;   max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */   /* max-width: calc(100% - 0.25em) /* Only for IE9+ */  }

<div class="container is-Inline">     <div class="Center-Block">         使用inline-block完成水平垂直居中     </div> </div>

5.2 该方法的核心思想是：

5.3 优缺点：

优：

1、内容高度自适应；2.如果子元素的内容溢出，会拉伸父元素的高度；3.兼容性好，兼容到IE7；

缺：

六、使用Flexbox

弹性布局是当前移动端比较流行的布局方式，它可以很优雅的完成垂直水平居中效果。

6.1 具体代码如下：

.container {   position: relative;   width: 100%;   height: 100%;   background-color: aliceblue; }  .container.is-Flexbox {   display: -webkit-box;   display: -moz-box;   display: -ms-flexbox;   display: -webkit-flex;   display: flex;   -webkit-box-align: center;       -moz-box-align: center;       -ms-flex-align: center;   -webkit-align-items: center;           align-items: center;   -webkit-box-pack: center;       -moz-box-pack: center;       -ms-flex-pack: center;   -webkit-justify-content: center;           justify-content: center; }  .center_block {   background-color: wheat;   padding: 20px; }

<div class="container is-Flexbox">   <div class="center_block">     使用flexbox完成水平垂直居中   </div> </div>

6.2 该方法的核心思想是：

6.3 优缺点：

优：

缺：

1.兼容性比较差，目前只有IE10以上兼容；2.需要写额外的兼容性前缀；3.各个浏览器的表现可能会有一些差异；

以上就是css中垂直水平居中的实现方法总结（附代码）的详细内容，更多内容请关注技术你好其它相关文章！