使元素水平垂直居中

【希卡利】

已于 2022-08-19 20:23:35 修改

阅读量118

点赞数

文章标签： html 前端 css

于 2022-07-09 20:51:43 首次发布

本文链接：https://blog.csdn.net/weixin_58017699/article/details/125697755

版权

1：position（已知元素的宽度）

第一种方法：

使用子绝父相：

父元素设置为：position:relative;

子元素设置为：position:absolute;

让子元素距上50%，距左50%，然后减去子元素自身宽度和高度的一半。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: rgb(8, 92, 128);
            position: relative;
        }

        .box .a {
            width: 100px;
            height: 100px;
            background-color: rgb(165, 49, 152);
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -50px 0 0 -50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="a"></div>
    </div>
</body>

</html>

效果图如下：

第二种方法：

使用子绝父相：

父元素设置为：position:relative;

子元素设置为：position:absolute;

设置子元素left，right，top，bottom均为0，再设置margin:auto;使其居中

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: rgb(8, 92, 128);
            position: relative;
        }

        .box .a {
            width: 100px;
            height: 100px;
            background-color: rgb(165, 49, 152);
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="a">love</div>
    </div>
</body>

</html>

效果如下图：

特殊情况：如果第二种方法中没有给子元素设置宽高，那么子元素将会铺满父元素。

2：position transform （元素的宽度未知）

如果元素的宽度是未知的，我们只需要将方法1中的margin：-50px 0 0 -50px;替换为:transform:translate(-50%,-50%);
transform的作用是:使元素在位置或者形状上发生一定的改变。其中translate属性是在位移上发生改变；具体方法为：transform:translate(水平位移量，垂直位移量)；水平位移量为正，则向右移动，垂直方向为正则向下移动，只写一个值，表示水平位移量；参数如果为百分比的话，则是相对于自身的高度，位移只是一种视觉效果，不会对别的盒子造成影响。

代码如下：

CSS代码：
<style>
        .box {
            width: 300px;
            height: 300px;
            background-color: rgb(8, 92, 128);
            position: relative;
        }

        .box .a {
            background-color: rgb(165, 49, 152);
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
    </style>

效果图如下：

3：flex 布局实现（元素已知宽度）

给父元素设置display: flex;

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: rgb(8, 92, 128);
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            align-items: center;
        }
        .box .a {
            width: 100px;
            height: 100px;
            background-color: rgb(165, 49, 152);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="a">love</div>
    </div>
</body>

</html>

效果如图所示：

4：table-cell 布局实现

table 实现垂直居中，子集元素可以是块元素，也可以不是块元素。

块元素，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: rgb(8, 92, 128);
            display: table-cell;
            vertical-align: middle;
        }
        .box .a {
            margin-left: 100px;
            width: 100px;
            height: 100px;
            background-color: rgb(165, 49, 152);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="a">love</div>
    </div>
</body>

</html>

效果图如下：

不是块元素，使内容（文字，图片）水平垂直居中：

行元素 text-align ：center；

块元素：margin ：0 auto；

text-align : center  给元素的父级加，可以使文本或者行级元素(例如：图片)水平居中
line-height : 值为元素的高度，可以使元素的文本内容垂直居中
margin: 0 auto 使用条件：父级元素宽度可有可无，子级元素必须使块元素，而且要有宽度（否则继承父级）

display：table-cell会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些 CSS 属性，使用 table-cell 时最好不要与 float 以及 position: absolute 一起使用，设置了 table-cell 的元素对高度和宽度高度敏感，对margin值无反应，可以响 padding 的设置，表现几乎类似一个 td 元素。

小结：

1. 不要与 float：left， position : absolute，一起使用

2. 可以实现大小不固定元素的垂直居中

3. margin 设置无效，响应 padding 设置

4. 对高度和宽度高度敏感

5. 不要对 display：table-cell 使用百分比设置宽度和高度。

【希卡利】

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使元素水平垂直居中

1：position（已知元素的宽度）第一种方法：使用子绝父相：代码如下：效果图如下：第二种方法：使用子绝父相：代码如下：效果如下图：特殊情况：如果第一种方法中的第二种方法中：没有给子元素设置宽高，那么子元素将会铺满父元素。2：position transform （元素的宽度未知）如果元素的宽度是未知的，我们只需要将方法1中的margin：-50px 0 0 -50p
复制链接

扫一扫