元素水平居中和垂直居中的方式

时间 2019-11-20

标签元素水平居中垂直方式繁體版

原文原文链接

元素水平居中和垂直居中的方式

关于居中的问题，一直处于迷惑不解的状态，知道的几种方法好像也不是每一次都会起到做用，因此更加迷惑。主要是不清楚该
在什么状况下采用哪一种解决方法，因此，整理了一些方法，梳理一下思路，作一个总结。css

1. line-height使单行文本垂直居中

对于单行文本，能够设置它的行高等于它父容器的高度，这样就实现了该文本的垂直居中，可是此方法只适用于单行文本。html

（其实严格意义上来讲，文字并非绝对的垂直居中的，有那么很小的几像素差距，只是咱们看上去它是居中的；这里的缘由，就是文本的基线对齐的因素了，感兴趣的朋友能够再深刻地去了解一下，这里我就不展开了）平时这样用就能够了。css3

对于多行文本，设置line-height就没法实现了，在这里有一个方法比较好。django

还记得刚学习html的时候，你们应该都记得表格table吧，在每个单元格里，若是咱们想要让里边的文本垂直居中的话，用到的属性是 vertical-align：middle；因此在多行文本的状况下，就能够用的这个属性。wordpress

前提条件是，咱们须要给文本再加一层标签，这里在 box3 中，我用 span 标签把文字包了起来。布局

给 span 的父级元素 div.box3 设置 display:table；给 span 设置display:table-cell;vertical-align:middle; 就能够了。post

这里我没有考虑IE低版本兼容性问题，能够参考下方的推荐阅读，作进一步了解。学习

示例代码以下：ui

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} div{ margin: 50px auto; width: 600px; height: 100px; line-height: 100px; font-size: 20px; font-weight: bold; color: #ff1493; background-color: #fff; box-shadow: 0 0 5px #000; border-radius: 10px; } .box2{ color: #800000; } .box3{ display: table; margin-top: 200px; } .box3 span{ display: table-cell; vertical-align: middle; line-height: 20px; } </style> </head> <body> <div class="box1"> 这段文字想要居中！这段文字想要居中！这段文字想要居中！ </div> <div class="box2"> 咱们也想要居中！<br> 咱们也想要居中！<br> 咱们也想要居中！ </div> <div class="box3"> <span> 咱们也想要居中！<br> 咱们也想要居中！<br> 咱们也想要居中！ </span> </div> </body> </html>

效果以下：spa

2. text-align 水平居中

该属性只能对图片、文字等行内元素(display为inline 或 inline-block 等)进行水平居中。

3. margin设置auto

水平方向上：

不管是块状元素仍是行内元素，均可以经过设置 margin 的 left 和 right 为 auto，来达到水平居中的效果，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。经常使用的地方，在作居中布局的时候，对于一个div设置 margin：0 auto; 来实现水平居中。

水平垂直方向：

对于一个块级元素，对它作绝对定位，而后设置它的 left right top bottom 都是0， margin 是 auto，来实现水平垂直都居中，对于行内元素，没法设置，由于margin-top 和 margin-bottom 对于行内元素不起做用；

代码以下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} .parent{ position: absolute; /* 父级元素设置相对定位 */ margin-left: 100px; margin-top: 100px; width: 600px; height: 400px; border: 1px solid #ddd; border-radius: 15px; background-color: #fff; box-shadow: 0 3px 18px rgba(0,0,0,.5); } .child{ position: absolute; /* 子级元素设置绝对定位 */ width: 100px; height: 100px; background-color: #3eb777; border-radius: 15px; left: 0; top: 0; right: 0; bottom: 0; margin:auto; /* 这个属性设置是必须的 */ } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>

效果以下：

那么，它是如何自适应的呢？

缘由要考虑到绝对定位，由于绝对定位的布局取决于三个因素，一个是元素的位置，一个是元素的尺寸，一个是元素的 margin 值。

没有设置尺寸和 margin 的元素会自适应剩余空间，位置固定则分配尺寸，尺寸固定便会分配 margin，都是自适应的。这样就实现了绝对居中的效果。

IE7如下的渲染方式不一样，渲染规则也不同，它不会让定位元素去自适应。so~

4. vertical-align 设置图片垂直居中(行内元素)

咱们先来看一下代码，代码中多设置了一个空的 span 标签，为何要这样，首先要搞清楚 vertical-align 这个属性的特色，它是相对兄弟级(line-height)来定位的（这里又涉及到了line-height和vertical-align的关系了，它们两个也是基情满满的，若有须要，你们能够移步到张鑫旭大神博客里进行查阅），而且它仅对行内元素有效，因此，在要定位的元素后面多加一个行内元素 span 来撑开父级的行高，以此来居中。

代码以下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} .parent{ margin-left: 100px; margin-top: 100px; width: 600px; height: 400px; border: 1px solid #ddd; border-radius: 15px; background-color: #fff; box-shadow: 0 3px 18px rgba(0,0,0,.5); text-align: center; } .child{ width: 0; line-height: 400px; } img{ vertical-align: middle; } </style> </head> <body> <div class="parent"> <img src="a21.png" alt=""> <span class="child"></span> </div> </body> </html>

效果以下：

5. 使用绝对定位来实现居中

该方法只适用于那些已知宽度和高度的元素，而且绝对定位对页面布局没有影响的状况下。

第一步，绝对定位进行居中的原理是经过把这个绝对定位元素的 left 或 top 的属性设置为 50%，这个时候并非居中的，而是比居中的位置偏移了这个元素宽度或高度的一半距离；

第二步，已知宽高的元素，可使用一个负的 margin-left 或 margin-top 的值来把它拉回到居中的位置，这个负的 margin 值就是这个元素宽度或高度的一半。

未知宽高的元素，中可使用 transform:translate(); 这个属性进行设置，这个位移属性是相对于自身进行的，能够传入两个参数，分别是 x 和 y 方向上的偏移量，因此能够传入 (-50%,-50%) 使得元素移动到中心位置实现水平垂直居中。

代码以下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} .parent{ position: relative; margin-left: 100px; margin-top: 100px; width: 600px; height: 400px; border: 1px solid #ddd; border-radius: 15px; background-color: #fff; box-shadow: 0 3px 18px rgba(0,0,0,.5); text-align: center; } .child{ position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background-color: #3eb777; border-radius: 15px; margin-top: -50px; margin-left: -50%; /*transform: translate(-50%,-50%); */ /*css3中的新属性*/ } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>

第一步效果：

第二步效果：

转载