安科网

CSS水平或垂直居中技巧

dangzhangjing

dangzhangjing

2019-11-09

关注 关注

前言

css水平和垂直居中是一个亘古不变的话题，它常常出现在优美的网页上以及各大前端面试当中。说来惭愧，在两年前面试的时候，我完全不知道如何做到水平和垂直均居中的方法，那场面别提有多尴尬了（ps：特想找个地洞钻进去）。。。时隔两年，对于这个问题算是有一些了解了，现做个小小的整理，也算是对自己学习的总结。

注：文中例子没写明html代码时，使用的是下面结构：

<div class="example example14">
    <div class="con">
        超级好用超级放心    
        <a href="https://tinypng.com/" target="_blank">在线压缩图片</a>
        <span>压缩完可以 </span> 
    </div>
</div>

只是类名会有所不同。

1、Line-height

适用情景：单行文字（垂直居中）
原理：将单行文字的行高设定后，文字会位于行高的垂直中间位置。
html：

<div class="example">Lorem ipsam.</div>

css：

.example{
    width: 400px;
    background: #afddf3;
    line-height: 50px;
}

效果：
CSS水平或垂直居中技巧

2、Line-height + inline-block

原理：将多个元素或多行元素当成一个行元素来看待，所以我们必须要将这些数据多包一层，并将其设定为inline-block。由于inline-block在不同浏览器会有空隙产生，因此设定父元素font-size：0来消除，从而达到完美的垂直居中。
css：

.example2{
    width: 400px;
    border: 1px solid #dcdcdc;
    line-height: 100px;
    font-size: 0;
}
.example2 .con {
    display: inline-block;
    line-height: 2;
    vertical-align: middle;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

CSS水平或垂直居中技巧

3、:before + inline-block

原理：:before 伪类元素搭配 inline-block 属性的写法应该是很传统的垂直居中的技巧了，此方式的好处在于子元素居中可以不需要特别设定高度，我们将利用:before伪类元素设定为100%高的inline-block，再搭配上将需要居中的子元素同样设置成inline-block性质后，就能使用vertical-align: middle来达到垂直居中的目的了，此方式在以往其实是个非常棒的垂直居中解决方案，唯独需要特别处理掉inline-block元素之间的4-5px空间这个小缺陷，不用怕，设置父元素font-size: 0，子元素font-size: 15px即可。
css:

.example3 {
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example3::before {
    content: '';
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
.example .con {
    width: 300px;
    font-size: 15px;
    background: #afddf3;
    display: inline-block;
    vertical-align: middle;
}

CSS水平或垂直居中技巧

4、table + margin

适用情景：单对象（水平居中）
原理：将子元素设置块级表格，再设置水平居中。
css:

.example4 {
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example .con {
    display: table;
    margin: 0 auto;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

CSS水平或垂直居中技巧

5、table + table-cell + vertical-align: middle

适用情景：多对象（垂直居中）
html:

<div class="example example5">
    <div class="con">
        超级好用超级放心    
        <a href="https://tinypng.com/" target="_blank">在线压缩图片</a>
        <span>压缩完可以打包下载哦 </span> 
    </div>
    <div class="con">
        CSS-TRICKS
    </div>
</div>

css:

.example5 {
    display: table;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example .con {
    display: table-cell;
    vertical-align: middle;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

CSS水平或垂直居中技巧

6、absolute + margin 负值

原理：设置绝对定位，top: 50%;后，再设置高度一半的负值实现。说来说去，这就是一道简单的数学题而已。
缺陷：需要设置居中元素的高度。
优势：无浏览器兼容性问题
css:

.example6 {
    position: relative;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example6 .con {
    position: absolute;
    top: 50%;
    height: 80px;
    margin-top: -40px;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

CSS水平或垂直居中技巧

7、absolute + margin auto

原理：当元素设置为绝对定位后，假设它是抓不到整体可运用的空间范围，所以margin: auto会失效，但当你设置了top:0;bottom:0;时，绝对定位元素就抓到了可运用的空间了，这时你的margin:auto就生效了。
缺陷：定位元素必须有固定的宽高（百分比也算）。
css:

.example7 {
    position: relative;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example7 .con {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 80px;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

CSS水平或垂直居中技巧

8、absolute + translate

原理：利用绝对定位时的top 与right设置元素的上方跟左方各为50%，再利用transform: translate(-50%, -50%);位移居中元素自身宽与高的50%就能达成居中的目的了。
缺陷：translate是css3属性，低版本浏览器不支持。
显著优势：无需固定定位元素的宽高。
css:

.example8 {
    position: relative;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example8 .con {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 15px;
    background: #afddf3;
}

CSS水平或垂直居中技巧

9、Flex + align-items

适用情景：多行文字（垂直居中）
原理：弹性布局，align-items定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式，参考CSS-TRICKS
缺陷：css3属性，低版本浏览器不支持。
显著优势：无需固定定位元素的宽高，代码干净利索。
css:

.example9 {
    display: flex;
    align-items: center;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example9 .con {
    font-size: 15px;
    background: #afddf3;
}

CSS水平或垂直居中技巧

10、Flex + justify-content

适用情景：多行文字（水平居中）
原理：弹性布局，justify-content设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式，参考CSS-TRICKS
缺陷：css3属性，低版本浏览器不支持。
显著优势：无需固定定位元素的宽高，代码干净利索。
css:

.example10 {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example .con {
    height: 80px;
    font-size: 15px;
    background: #afddf3;
}

CSS水平或垂直居中技巧

11、Flex + :before + flex-grow

适用情景：多行文字（垂直居中）
原理：弹性布局，Flex-direction：column;将项目垂直显示，正如一个列一样。flex-grow: [number];规定项目将相对于其他灵活的项目进行扩展的量，参考CSS-TRICKS
缺陷：css3属性，低版本浏览器不支持，并且难度稍大，一般不会想到这种方法。
显著优势：无需固定定位元素的宽高
css:

.example11 {
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example11:before {
    content: '';
    flex-grow: .5;
}
.example11 .con {
    font-size: 15px;
    background: #afddf3;
}

CSS水平或垂直居中技巧

12、Flex + margin

缺陷：css3属性，低版本浏览器不支持。
css:

.example12 {
    display: flex;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example12 .con {
    margin: auto;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

CSS水平或垂直居中技巧

13、Flex + align-self

原理：align-self定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
缺陷：css3属性，低版本浏览器不支持。
css:

.example13 {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example13 .con {
    align-self: center;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

CSS水平或垂直居中技巧

14、Flex + align-content

原理：align-content在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直），弹性项目有多项此属性才会发挥作用。
缺陷：css3属性，低版本浏览器不支持。
css:

.example14 {
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
    width: 400px;
    height: 150px;
    font-size: 0;
    border: 1px solid #dcdcdc;
}
.example14:before, .example14:after {
    content: "";
    display: block;
    width: 100%;
}
.example14 .con {
    height: 80px;
    width: 300px;
    font-size: 15px;
    background: #afddf3;
}

CSS水平或垂直居中技巧

下面是一个比较常见的例子,往往是不想让图片发生变形并且不管尺寸大小均会显示在容器的正中央（以下例子应用的是第8条）。
html:

<div class="imgbox-box">
   <div class="imgbox">
       <img src="imgs/head.jpeg" alt="">
   </div>
   <div class="imgbox">
       <img src="imgs/head.jpeg" alt="">
   </div>
   <div class="imgbox">
       <img src="imgs/head.jpeg" alt="">
   </div>
</div>

css:

.imgbox-box {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
}
.imgbox {
    width: 200px;
    height: 200px;
    position: relative;
    background: #ebf8ed;
    overflow: hidden;
}
.imgbox img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
}

CSS水平或垂直居中技巧

结语：有些是水平居中，有些是垂直居中，将它们某两个合在一起就能实现水平和垂直均居中。不过我相信肯定不止这些方法，还有其他的值得我们去探究。若文中有错，请大家指正，谢谢！

dangzhangjing

dangzhangjing

0 关注 0 粉丝 0 动态

关注 关注
dangzhangjing

dangzhangjing

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号