CSS 技巧篇(七)：设置元素居中

栏目: CSS · 发布时间: 5年前

内容简介：以下将整理关于使用CSS使元素居中的一些方法案例模版：要让居中元素满足两个条件：其一，元素需要有一个固定宽度值；其二元素的margin-left和margin-right都必须设置为auto，这两个条件少了任何一个都无法让元素达到水平居中的效果。

以下将整理关于使用CSS使元素居中的一些方法

案例模版：

<body>
    <div id="main">
        <div id="center">这个块居中</div> 
    </div>
</body>

<style>
    body{
        height: 200px;
    }
    #main{
        border:1px red solid;
    }
    #center{
        border: 1px green solid;
    }
</style>
复制代码

一、水平居中

1、使用margin:0 auto配合元素的width

#center{
    width: 100px;
    margin: 0 auto;
}
复制代码

要让居中元素满足两个条件：其一，元素需要有一个固定宽度值；其二元素的margin-left和margin-right都必须设置为auto，这两个条件少了任何一个都无法让元素达到水平居中的效果。

缺点：需要固定居中元素的宽度。

注意：当元素处于position:absolute;时，margin:0 auto无效，需要将right于left都设为0才可以，如下所示：

#center{
    width: 100px;
    margin: 0 auto;
    position:absolute;
    right:0;
    left:0;
}
复制代码

2、使用绝对定位配合margin

#center{
    width: 100px;
    position: absolute;
    left: 50%;
    margin-left: -100px; /*值为width的一半*/
} 
复制代码

居中元素设置一个负的“margin-left”并且值等于宽度的一半，另外如果元素不是相对于浏览器的话，还需要在其父元素上设置一个相对定位“position: relative”。

缺点：需要固定居中元素的宽度。

以上两种方式都必须设置固定的宽度值，下面将解决不需要固定宽度值的方法。

3、块级父元素让行内元素居中

#main{
    text-align: center;
}
复制代码

对居中元素的父元素设置text-align属性。

优点：不需要设置元素的固定宽度。

缺点：居中元素必须是inline或者设置为inline-block。

4、利用relative定位与行内样式

#main{
    display: inline-block;
    position: relative;
    left: 50%;
}
#center{
    display: inline-block;
    position: relative;
    right: 50%;
}
复制代码

1、将#main与#center全部设置为inline-block，将包裹他们的内容：

2、将#main往右移其宽度的50%：

3、然后将#center往左移其宽度的50%：

4、最终#center元素居中。

优点：不需要设置元素的固定宽度。

缺点：居中元素的元素被设置为inline-block。

5、通过transform进行设置

#main{
    position: relative;
}
#center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
复制代码

首先left:50%先右移#main50%的宽度，然后通过translateX(-50%)在左移本身50%的宽度。

优点：不需要设置元素的固定宽度。

缺点：居中元素被设置为absolute。

6、通过flex-box

#main{
    display: flex; 
    justify-content: center; 
}
复制代码

优点：不需要设置元素的固定宽度。

缺点：父元素被设置为flex。

二、垂直居中

1、通过line-height

#main{
    height: 200px;
    line-height: 200px;
}
复制代码

居中元素的父元素必须要设置准确height数值。并且居中元素如果是多行文本将错乱。这种方式适合小元素，单行文本。

缺点：需要固定父元素的height值，并且居中元素如果是多行文本将错乱。仅适合小元素，单行文本。

2、使用绝对定位搭配margin

#main{
    position: relative;
}
#center{
    height: 50px;
    position: absolute;
    top: 50%;
    margin-top: -25px; /*值为height的一半*/
}
复制代码

缺点：需要固定居中元素的height值。

以上两种方式都必须设置固定的height值，下面将解决不需要固定heignt值的方法。

3、通过table-cell与vertical-align

#main{
    height: 100%;
    display: table;
}
#center{
    display: table-cell;
    vertical-align: middle;
}
复制代码

父元素设置为display:table;子元素设置为display:table-cell;并且设置vertical-align:midden;

4、通过添加一个额外的标签

<body>
    <div id="main">
        <div id="center">这个块居中</div> 
        <div id="other"></div>
    </div>
</body>
<style>
#main{
    height: 100%;
}
#center,#other{
    display: inline-block;
    vertical-align: middle;
}
#other{
    height: 100%;
}
</style>
复制代码

缺点：需要额外添加一个元素。

5、通过transform进行设置

#main{
    height:100%;
    position: relative;
}
#center{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
复制代码

首先top:50%先下移#main50%的高度，然后通过translateY(-50%)在上移本身50%的高度。

优点：不需要设置元素的固定高度。

缺点：居中元素被设置为absolute。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Google's PageRank and Beyond

Amy N. Langville、Carl D. Meyer / Princeton University Press / 2006-7-23 / USD 57.50

Why doesn't your home page appear on the first page of search results, even when you query your own name? How do other web pages always appear at the top? What creates these powerful rankings? And how......一起来看看《Google's PageRank and Beyond》这本书的介绍吧!

码农工具

RGB转16进制工具

RGB HEX 互转工具

图片转BASE64编码

在线图片转Base64编码工具