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

来源：互联网发布：黑魂3剧情解析知乎编辑：程序博客网时间：2024/05/20 18:01

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

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

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

即给父盒子一个display：table；子盒子设置：display：table-cell即可

代码如下：

<!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>

2. text-align 水平居中

该属性只能对图片、文字等行内元素(display为inline 或 inline-block 等)进行水平居中，对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>

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

我们先来看一下代码，代码中多设置了一个空的 span 标签，为什么要这样，首先要搞清楚 vertical-align 这个属性的特点，它是相对兄弟级(line-height)来定位的，并且它仅对行内元素有效，所以，在要定位的元素后面多加一个行内元素 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>

（张雄同学总结分享的，我就拿来主义了

）

0 0