css的水平垂直居中的七中方式

最新推荐文章于 2024-09-02 08:00:00 发布
最新推荐文章于 2024-09-02 08:00:00 发布
阅读量196 收藏
点赞数
分类专栏： css 文章标签： css 水平垂直居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34451947/article/details/103161115
版权

水平垂直居中

说到css  我们在工作中经常用到的就是垂直居中： 但是水平垂直居中你知道几种呢？ 下面罗列了七中欢迎大家参考
第一种方法 利用定位
//代码如下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .wrap{
        width: 1000px;
        height: 600px;
        background-color: yellow;
        position: relative;
    }
    .box{
        width: 300px;
        height: 300px;
        background-color: #ccc;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="box"></div>
    </div>
</body>
</html>
效果演示如下:

在这里插入图片描述

第二种方法也是利用定位
//该方法需要知道居中元素的宽和高
//代码如下 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap {
            width: 1000px;
            height: 600px;
            background-color: yellow;
            position: relative;
        }

        .box {
            width: 300px;
            height: 300px;
            background-color: #ccc;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -150px;
            margin-left: -150px;
        }
    </style>
</head>

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

</html>
效果演示如下:

在这里插入图片描述

第三种利用 CSS3.0 transform属性+定位
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap {
            width: 1000px;
            height: 600px;
            background-color: rgb(0, 174, 255);
            position: relative;
        }

        .box {
            width: 300px;
            height: 300px;
            background-color: rgb(204, 204, 204);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>

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

</html>
效果演示如下：

在这里插入图片描述

第四种方法 弹性盒模型
//如果不了解弹性盒子的可以去我的博客css里面看  讲的很详细  很适合新手快速学会弹性盒子
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap {
            width: 1000px;
            height: 600px;
            background-color: rgb(0, 255, 98);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .box {
            width: 300px;
            height: 300px;
            background-color: rgb(48, 26, 26);
            
        }
    </style>
</head>

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

</html>
效果演示如下：

在这里插入图片描述

第五种方法 利用absolute + calc
//这种方法兼容性依赖calc的兼容性，缺点是需要知道子元素的宽高
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap {
            width: 1000px;
            height: 600px;
            background-color: rgb(0, 255, 98);
            position: relative;
        }

        .box {
            width: 300px;
            height: 300px;
            background-color: rgb(48, 26, 26);
            position: absolute;
            top: calc(50%  - 150px);
            left: calc(50% - 150px);
        }
    </style>
</head>

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

</html>
效果演示如下:

在这里插入图片描述

第六种 css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中
//代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            width: 1000px;
            height: 600px;
            background-color:purple;
        }

        .box {

            background-color: rgb(48, 26, 26);
            display: inline-block;
            width: 300px;
            height: 300px;
        }
    </style>
</head>

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

</html>
效果展示如下：

在这里插入图片描述

第七种 grid
//代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrap {
            display: grid;
            width: 1000px;
            height: 600px;
            background-color: rgb(0, 81, 128);
        }

        .box {

            background-color: rgb(46, 26, 48);
            width: 300px;
            height: 300px;
            align-self: center;
            justify-self: center;
        }
    </style>
</head>

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

</html>
效果演示如下

在这里插入图片描述

顺带总结下：
1. PC端有兼容性要求，宽高固定，推荐absolute + 负margin
2. PC端有兼容要求，宽高不固定，推荐css-table
3. PC端无兼容性要求，推荐flex
4. 移动端推荐使用flex
旧城空巷旧心
关注
专栏目录
CSS水平垂直居中解决方案(6种)
09-24
以下将详细介绍六种不同的CSS水平垂直居中解决方案： 1. **绝对定位+margin负值法** 当你知道元素的宽度时，可以使用这种方法。首先，设置父元素为相对定位，然后子元素使用绝对定位，将其left和top属性设置为50%...
css实现元素水平垂直居中常见的两种方式实例详解
09-24
总结来说，CSS实现元素的水平垂直居中有多种方法，这里主要介绍了flexbox布局和绝对定位结合负margin的两种常见方式。Flexbox方法更现代且适应性强，适合现代浏览器环境；而绝对定位的方法在一些老版本的浏览器中...
css实现水平垂直居中的七种方式
qq_39410252的博客
08-22 1502
css实现水平垂直居中的七种方式
css水平垂直居中四种常用方式
CSDdas的博客
05-10 3928
css水平垂直居中四种常用方式
CSS设置水平垂直居中的方法（ 7种 ）
大剑师兰特的GIS世界
03-19 1791
CSS中内容居中的方法有很多种，具体取决于您想要居中的内容是什么类型的元素以及是在什么情况下居中。
CSS实现水平垂直居中的6种方式
weixin_44370837的博客
05-11 3万+
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 在开发中经常需要实现的一个页面效果是：元素的垂直居中。 在此记录一下，经常适用的几种方法 前提：元素之前的布局关系如下，需要实现class为son该元素的垂直居中 <style> .son { width: 200px; height: 200px; background-color: p
16种CSS水平垂直居中方法
weixin_45709829的博客
03-22 3万+
16种css水平垂直居中方法以及应用（文字、图片） 一、垂直居中 1、行内元素 基本思想：单行文本子元素line-height 值为父元素 height 值 .parent { height: 200px; } .son { line-height: 200px; } 2、块级元素 2.1行内块级元素 基本思想：元素是行内块级，使用display: inline-block, vertical-align: middle+伪元素处于容器中央 兼容性：支持IE7 .parent::afte
CSS 水平垂直居中的7种方法 - 附示例
最新发布
m0_48968874的博客
09-02 957
【代码】CSS 水平垂直居中的七种方法 - 附示例。
CSS常用水平垂直居中的几种方法
qq_33721778的博客
12-28 2万+
CSS水平垂直居中一、利用margin:auto二、利用position: absolute三级目录 一、利用margin:auto 元素有宽度和高度时，利用margin:auto设置元素水平垂直居中： HTML代码如下： <div class="div1"> <div class="center"></div> </div> CSS代码如下： .div1 { background-color: #eee; width: 200px; hei
css元素水平垂直居中
博哥的二进制世界
06-03 1391
/图片与文字垂直居中，但会有少量偏差，再通过。在应用一的基础上，给子项（元素） 添加 vertical-align: middle;//子元素相对父元素水平（主轴）居中。//子元素相对父元素垂直（交叉轴）居中。这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。//给父元素加，弹性布局。margin-left:- 自身宽度一半;margin-top:-自身高度一半;
css盒子水平垂直居中(4种)
2301_76917834的博客
07-17 922
【代码】css盒子水平垂直居中(4种)
使用 CSS 实现垂直居中的8种方法
热门推荐
秋天，黄叶坠地，凉风有信。
03-25 10万+
​​​​​​CSS垂直居中的8种方法 目录 ​​​​​​CSS垂直居中的8种方法 1、通过verticle-align:middle实现CSS垂直居中。 2、通过display:flex实现CSS垂直居中。 3、通过伪元素:before实现CSS垂直居中。 4、通过display:table-cell实现CSS垂直居中。 5、通过隐藏节点实现CSS垂直居中。 6、已知父元素高度通过transform实现CSS垂直居中。 7、到垂直居中的位置。 8、通过line-height实现...
CSS水平垂直居中的几种方法总结
09-24
CSS水平垂直居中技术是指在网页布局过程中，对页面中的一个或多个元素进行位置安排，使其在容器中水平和垂直方向上都处于中心位置的技术。水平垂直居中是Web前端开发中非常常见和重要的布局技巧，它能提高页面的视觉...
使用css实现div垂直居中的示例
09-25
总结来说，这个示例展示了两种CSS方法来实现`div`元素的垂直居中： 1. 对于包含文本的`div`，通过设置`text-align: center`和合适的`line-height`实现文本的垂直居中。 2. 对于需要整体居中的`div`，使用`position:...
css让容器水平垂直居中的7种方式
09-27
在CSS布局中，让容器水平垂直居中是常见的需求，特别是在设计响应式网站或移动应用时。以下将详细介绍七种实现这一目标的方法。 1. **Position + Margin** 这种方法利用绝对定位和负margin来实现居中。首先，外层...
css弹性盒模型详解----flex-wrap
qq_34451947的博客
11-13 2523
本篇文章详细介绍flex-wrap flex-wrap是控制盒模型容器下一级子元素的在一行显示的时候是否换行 nowrap（默认值）：不换行 wrap：自动换行 wrap-reverse：换行，第一行在下方。 //第一条属性 默认的nowrap 不换行 <!DOCTYPE html> <html lang="en"> <head> ...
css弹性盒模型详解---- align-items
qq_34451947的博客
11-13 1533
本篇文章详细介绍了弹性盒模型的 align-items 属性 什么是align-items？ align-items 是 设置或检索弹性盒子元素在（Y）轴方向上的对齐方式。其下有四种属性： flex-start：弹性盒子元素的（Y）轴起始位置的边界紧靠住该行的侧轴起始边界。 flex-end：弹性盒子元素的（Y）轴起始位置的边界紧靠住该行的侧轴结束边界。 center：弹性盒子元...
css弹性盒模型详解----justify-content
qq_34451947的博客
11-13 1337
本篇文章详细介绍justify-content justify-content的几种属性 flex-start：弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。 flex-end：弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项...
css弹性盒模型详解----flex-direction
qq_34451947的博客
11-13 947
本篇文章详细介绍flex-direction flex-direction 是控制盒模型容器下一级子元素的排列方式的属性 一共有四种 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 //第一种属性 flex-direct...
五种CSS技巧实现水平垂直居中
继续阅读文章，您可以学习如何利用Flexbox布局或者Grid布局来实现灵活且响应式的水平垂直居中。Flexbox的优点在于其直观易用，适应性强，而Grid布局则提供了更为精确的二维布局控制。这两种现代CSS布局技术都是实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值