三、垂直居中一起使用的方法（上述结合使用）

总结

前言

实现元素居中其实有很多方法，掌握一种其实是不够的，因为在不同的布局和需求面前，就要选择不同的解决方案，有时候自己在设计页面的时候，居中也是一个比较苦恼的问题，下面就来分析一下各种实现居中的方法，以及不同场合的使用情况。

正文

一、让元素垂直居中显示的几种方法

1、使用表格的 vertical-align(垂直对齐) 的property属性。

说明

vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

middle

把此元素放置在父元素的中部。


    <div class="wrapper">
        <div class="cell">
            <div class="content">
               //
            </div>
        </div>
    </div>

.wrapper {
    display: table;
    background: rgb(159, 200, 214);
    height: 150px;
    overflow: hidden;
}
.cell {
    display: table-cell;
    vertical-align: middle;
    background: rgb(209, 171, 159);
    height: 100px;
}

效果：

优缺点：

优点:content 可以动态改变高度(不需在CSS 中定义)。当 wrapper 里没有足够空间时， content 不会被截断

缺点：InternetExplorer(甚至 IE8 beta)中无效，许多嵌套标签，内容过多时宽度可控但是高度不可控。

2、使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度/2。

    <div class="box2">
        <div class="content2">
           //
        </div>
    </div>

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.content2 {
    position: absolute;
    top: 50%;
    height: 150px;
    width: 300px;
    margin-top: -75px;
    /* negative half of the height */
    background: rgb(167, 200, 216);
    overflow: auto;
}

效果：

优缺点：

可以设置宽高，高必须设置，这意味着对象必须在 CSS 中指定固定的高度。因为有固定高度，或许你想给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出。

优点：适用于所有浏览器<br>不需要嵌套标签

缺点：没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)

3、加上floater的div，floater的height:为box的50%;margin-bottom: 为content的高加上下内边距 / 2

<div class="box">
    <div class="floater"></div>
    <div class="content3">
        //
    </div>
</div>

.box {
    width: 400px;
    height: 300px;
    background: rgb(212, 159, 159);
}
.floater {
    height: 50%;
    margin-bottom: -80px;
    /* content的高加上下内边距 / 2*/
}
.content3 {
    width: 300px;
    height: 140px;
    background: #abc;
    overflow: auto;
}

效果：

这个方法的思想其实就是借助一个额外的floater元素将content间接地置位父元素的中间。

优缺点：

        优点：

        适用于所有浏览器

        没有足够空间时(例如：窗口缩小) content 不会被截断，滚动条出现（这里的滚动条是指窗口的滚动条）

        缺点：需要额外的空元素

4、使用了一个 position:absolute

<div class="box2">
    <div calss="content4">
        //
    </div>
</div>

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.content4 {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 220px;
    width: 70%;
    background: #abc;
    overflow: auto;
}

效果：

有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度，其实并不能和上下都间距为 0，因此 margin:auto; 会使它居中。使用margin:auto;使块级元素垂直居中是很简单的。

优点：简单

缺点：

IE(IE8 beta)中无效

无足够空间时，content 被截断，但是不会有滚动条出现（浏览器窗口的滚动条），需要添加overflow: auto;

5、只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。这个方法只能将单行文本置中

<div class="box2">
    <div class="content5">
        只能一行
    </div>
</div>

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.content5 {
    height: 200px;
    line-height: 200px;
    background: rgb(204, 187, 238);
}

效果：

优点：

适用于所有浏览器

无足够空间时不会被截断

缺点：

只对文本有效(块级元素无效)

多行时，断词比较糟糕

这个方法在小元素上非常有用，例如使按钮文本或者单行文本居中。

6、利用flex布局"弹性布局"

这个方法用的比较高级，可以应用到多个块元素需要规范的时候，当子元素有多个的时候，平均分配空间用弹性布局就最好不过，当然，当只有一个子元素时，就可以实现居中了。

<div class="parent">
    <div class="children">
        //
    </div>
</div>

.parent {
    width: 300px;
    height: 200px;
    background: #09c;
    display: flex;
    align-items: center;
}

.children {
    width: 150px;
    height: 150px;
    background-color: #eee;
    border: 1px dashed #000;
    overflow: auto;
    /*如果children下面还有子元素的话，可以嵌套使用*/
    /* display: flex;
            justify-content: center;
            align-items:center;  */
}

优点：

不同通过计算

可嵌套使用

缺点：无足够空间时，content 被截断（被浏览器），但是不会有滚动条出现

二、让元素水平居中显示的几种方法。

1.使用自动外边距实现居中

<div class="box2">
    <div class="container1">
         //
    </div>
</div>

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.container1 {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    background: #abc;
}

CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可。在实际使用中，我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是，必须为该容器指定宽度

优点：最正确、最合理的方法，简单

缺点：IE6以下版本不支持

2.使用text-align实现文字居中

<div class="container2">
    //   
</div>

.container2 {
    width: 300px;
    background: #eee;
    text-align: center;
}

body{text-align:center;}，body的所有子孙元素文字都会被居中显示.

优点：兼容大多数浏览器

缺点：这种方法并没有将文本属性应用到文本上，而是应用到了作为容器的元素上，因此要额外的将文本属性的text-align设置为left。真正完全遵循标准的浏览器并不会改变容器的位置，而只会让其中的文字居中显示。

3.组合使用自动外边距和文本对齐

<div class="box2">
    <div class="container3">
            //
    </div>
</div>

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.container3 {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid red;
    width: 300px;
    text-align: left;
}

因为文本对齐居中方式有着良好的向下兼容性，且自动外边距方式也被大多数当代浏览器支持，所以很多设计师将二者组合起来使用，以期让居中效果得到最大限度的跨浏览器支持：

优点：让居中效果得到最大限度的跨浏览器支持

缺点：需要附加的规则

4.负外边距解决方案

<div class="box2">
    <div class="container4">
       //
    </div>
</div>

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.container4 {
    background: rgb(255, 255, 168);
    position: absolute;
    left: 50%;
    width: 300px;
    margin-left: -150px;
    text-align: left;
}

负外边距解决方案远不是仅仅为元素添加负外边距这么简单。这种方法需要同时使用绝对定位和负外边距两种技巧。

优点：

适用于所有浏览器

不需要嵌套标签

缺点：需要设置container的宽度，并计算

5、利用flex布局"弹性布局"

<div class="parent">
    <div class="children">
        //
    </div>
</div>

.parent {
    width: 300px;
    height: 200px;
    background: #09c;
    display: flex;
    justify-content: center;
}

.children {
    width: 150px;
    height: 150px;
    background-color: #eee;
    border: 1px dashed #000;
    overflow: auto;
    /*如果children下面还有子元素的话，可以嵌套使用*/
    /* display: flex;
            justify-content: center;
            align-items:center;  */
}

justify-content: center; /* 水平居中 */

优点：

不同通过计算

可嵌套使用

缺点：无足够空间时，container被截断（相对于浏览器），但是不会有滚动条出现

三、垂直居中一起使用的方法（上述结合使用）

1、使用了一个 position:absolute

<div class="box2">
    <div class="content4">
        //
    </div>
</div>

.box2 {
    width: 400px;
    height: 300px;
    background: rgb(160, 112, 112);
    position: relative;
}
.content4 {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    height: 220px;
    width: 70%;
    background: #abc;
    overflow: auto;
}

2、利用flex布局"弹性布局"

<div class="parent">
    <div class="children">
        //
    </div>
</div>

.parent {
    width: 300px;
    height: 200px;
    background: #09c;
    display: flex;
    justify-content: center;
    align-items:center;
}

.children {
    width: 150px;
    height: 150px;
    background-color: #eee;
    border: 1px dashed #000;
    overflow: auto;
    /*如果children下面还有子元素的话，可以嵌套使用*/
    /* display: flex;
            justify-content: center;
            align-items:center;  */
}

总结

理解起来并不难，重要的是自己尝试的去看看效果，才能真正的明白。

【CSS】几种让元素居中的方法（包括垂直居中和水平居中），网页示图

前言

正文

一、让元素垂直居中显示的几种方法

1、使用表格的 vertical-align(垂直对齐) 的property属性。

2、使用绝对定位的 div，把它的 top 设置为 50％，top margin 设置为负的 content 高度/2。

3、加上floater的div，floater的height:为box的50%;margin-bottom: 为content的高加上下内边距 / 2

4、使用了一个 position:absolute

5、只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。这个方法只能将单行文本置中

6、利用flex布局"弹性布局"

二、让元素水平居中显示的几种方法。

1.使用自动外边距实现居中

2.使用text-align实现文字居中

3.组合使用自动外边距和文本对齐

4.负外边距解决方案

5、利用flex布局"弹性布局"

三、垂直居中一起使用的方法（上述结合使用）

1、使用了一个 position:absolute

2、利用flex布局"弹性布局"

总结

猜你喜欢