欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

CSS常用居中方法

程序员文章站 2022-05-11 12:47:54
...

在使用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 的水平垂直居中了，但是使用绝对定位居中有以下几点需要注意：

  1. 元素必须声明高度，可以使用固定高度如：px、em 也可使用百分比高度或min-/max-高度。
  2. 最好设置 overflow:hidden 防止内容溢出。
  3. 在Windows Phone设备上不起作用。
  4. 在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居中的常用方法，可以在不同的情况下灵活选用，以保证达到最好的效果。

上一篇： 近期不熟知识点学习总结

下一篇： layui 动态数据表格的学习

推荐阅读