CSS常用居中方法

2017-08-26 本文已影响27人 WWWKY

在使用CSS对页面进行样式布局的时候，居中是我们最经常用到的布局之一，而居中布局又分为水平居中和垂直居中。
本文将要给大家介绍CSS居中布局的几种常用方法。

一、水平居中

行内元素及类行内元素居中

使用 text-align: center; 令块级父容器中的行内元素居中.
HTML:

<body>
    <div class="father-div">
        <p class="inline-center">
            inline/inline-block/inline-table/inline-flex
        </p>
    </div>
</body>

CSS:

.father-div {
    text-align: center;
}
.inline-center {
    background-color: red;
}

需要注意的是 text-align: center; 这种方法只能作用于 inline/inline-block/inline-table/inline-flex 等类型的元素

块级元素使用 margin: 0 auto;

HTML:

<body>
    <div class="father-div">
        <div class="center">
        </div>
    </div>
</body>

CSS:

.center {
    background-color: red;
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

对块级元素使用 margin: 0 auto; 使其水平居中需要注意设置居中元素的宽度，高度可以直接设置也可通过内容撑开。

使用position定位

使用position对元素进行居中需要设置居中元素的宽度，同时对其父元素设置 position: relative;
HTML:

<body>
    <div class="father-div">
        <div class="center">
        </div>
    </div>
</body>

CSS:

.father-div {
    position: relative;
}
.center {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 50%;
    margin-left: -50px;
}

此种方法需要在父元素设置为 position: relative; 的情况下，将居中元素设置为 position: absolute; ，同时需要为居中元素设置宽度，随后设置 left: -50% ，最后添加一个 margin-left ，值为负的宽度的一半。

flex居中

justify-content:center; 主轴居中。
HTML:

<body>
    <div class="father-div">
        <div class="center">
        </div>
    </div>
</body>

CSS:

.father-div {
    display: flex;
    justify-content: center;
}
.center {
    width: 100px;
    height: 100px;
    background-color: red;
}

另外，使用flex布局使元素居中可以不设置元素的宽高，可以用内容将其撑开。

使用transform

HTML:

<body>
    <div class="father-div">
        <div class="center">
        </div>
    </div>
</body>

CSS:

.father-div {
    position: relative;
}
.center {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    left: 50%;
    float: left;
    transform: translateX(-50%);
}

使用transform一样不必设置居中元素的宽高。

二、垂直居中

行内元素及类行内元素的垂直居中
对于父元素高度固定且单行的行内元素及类行内元素垂直居中，最基本方法是将其 line-height 设置为与 height 相同即可

HTML:

<body>
    <div class="father-div">
        <p class="center">
            centercentercentercentercentercentercentercentercentercentercenter
        </p>
    </div>
</body>

CSS:

.father-div {
    height: 100px;
    background-color: red;
}
.center {
    line-height: 100px;
}

使用 vertical-align
此方法需要为居中元素的父元素添加 display: table;，并为居中元素添加 display: table-cell;，随后设置其 vertical-align 属性的值为 middle。

HTML:

<body>
    <div class="father-div">
        <p class="center">
            centercentercentercentercentercentercentercentercentercentercenter
        </p>
    </div>
</body>

CSS:

.father-div {
    height: 100px;
    background-color: red;
    display: table;
}
.center {
    display: table-cell;
    vertical-align: middle;
}

利用position定位

同水平居中相似，在使元素垂直居中的方法中一样可以使用绝对定位。
HTML:

<body>
    <div class="father-div">
        <div class="center">
        </div>
    </div>
</body>

CSS:

.father-div {
    width: 300px;
    height: 300px;
    background-color: red;
    position: relative;
}
.center {
    width: 100px;
    height: 100px;
    background-color: yellow;
    position: absolute;
    top: 50%;
    margin-top: -50px;
}

使用transform

HTML:

<body>
    <div class="father-div">
        <div class="center">
            transformtransformtransformtransform
        </div>
    </div>
</body>

CSS:

.father-div {
    width: 300px;
    height: 300px;
    background-color: red;
    position: relative;
}
.center {
    background-color: yellow;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

使用CSS3的transform属性允许开发者不设置居中元素的宽高

三、水平垂直居中

绝对定位居中

上文水平居中的方法中我们讲到 margin:0 auto 可以实现水平居中，现在我们使用 margin:auto 一样可以实现水平垂直居中。
HTML:

<body>
    <div class='absolute-center'>
    </div>
</body>

CSS:

.absolute-center {
    background-color: red;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
}

这样一来我们就可以实现 .absolute-center 的水平垂直居中了，但是使用绝对定位居中有以下几点需要注意：

元素必须声明高度，可以使用固定高度如：px、em 也可使用百分比高度或min-/max-高度。
最好设置 overflow:hidden 防止内容溢出。
在Windows Phone设备上不起作用。
在IE-8以下的浏览器中不支持。

使用position定位

在元素的水平居中和垂直居中的内容中我们都提到了使用position定位来实现元素的居中，现在我们将两者结合起来就可以实现水平垂直中。

HTML:

<body>
    <div class="father-div">
        <div class="center">
        </div>
    </div>
</body>

CSS:

.father-div {
    width: 300px;
    height: 300px;
    background-color: red;
    position: relative;
}
.center {
    width: 100px;
    height: 100px;
    background-color: yellow;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 50%;
    margin-left: -50px;
}

使用transform

同样，我们使用CSS3的transform属性也可以实现元素的水平垂直居中。
HTML:

<body>
    <div class="father-div">
        <div class="center">
        </div>
    </div>
</body>

CSS:

.father-div {
    width: 300px;
    height: 300px;
    background-color: red;
    position: relative;
}
.center {
    background-color: yellow;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

使用transform属性可以利用内容撑开元素从而避免对元素设置确定的宽高。

以上就是我所要介绍的几种CSS居中的常用方法，可以在不同的情况下灵活选用，以保证达到最好的效果。

CSS常用居中方法

一、水平居中

二、垂直居中

三、水平垂直居中

猜你喜欢

热点阅读