CSS实现居中

最新推荐文章于 2024-07-11 22:36:37 发布
最新推荐文章于 2024-07-11 22:36:37 发布
阅读量110 收藏
点赞数
分类专栏： html 文章标签： html css 定位 flex html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51692246/article/details/113833036
版权

垂直居中

1. display:flex

  • 通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;
  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: yellow;
            width: 300px;
            height: 300px;
            display: flex;
        }

        .in{
            background-color: green;
            width: 50%;
            height: 50%;
            align-self: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="in"></div>
    </div>
</body>
</html>

2. :before

  • 为父元素添加伪元素:before，使得子元素实现垂直居中。
  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: yellow;
            width: 300px;
            height: 300px;
        }

        .box:before{
            content: "";
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }

        .in{
            background-color: green;
            width: 50%;
            height: 50%;
            display: inline-block;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="in"></div>
    </div>
</body>
</html>

3. 隐藏节点

  • 创建一个隐藏节点.hide，使得隐藏节点的height值为剩余高度的一半
  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: yellow;
            width: 300px;
            height: 300px;
        }

        .hide{
            width: 50%;
            height: 25%;
        }

        .in{
            background-color: green;
            width: 50%;
            height: 50%;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="hide"></div>
        <div class="in"></div>
    </div>
</body>
</html>

4. transform(已知父元素高度)

  • 给子元素的position:relative，再通过translateY即可定位到垂直居中的位置。
  • 必须知道父元素高度
  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: yellow;
            width: 300px;
            height: 300px;
        }

        .in{
            background-color: green;
            width: 50%;
            height: 50%;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="in"></div>
    </div>
</body>
</html>

5. transform(未知父元素高度)

  • 先给父元素position:relative，再给子元素position:absolute，通过translateY即可定位到垂直居中的位置
  • 无需知道父元素高度
  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: yellow;
            width: 300px;
            height: 300px;
            position: relative;
        }

        .in{
            background-color: green;
            width: 50%;
            height: 50%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="in"></div>
    </div>
</body>
</html>

6. line-height

  • 适用于文本
  • 设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况
  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: yellow;
            width: 300px;
            height: 300px;
            position: relative;
        }

        .in{
            width: 50%;
            height: 50%;
            line-height: 300px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="in">hello world</div>
    </div>
</body>
</html>

水平居中

1. margin

  • 给子元素添加margin: 0 auto;
  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: yellow;
            width: 300px;
            height: 300px;
        }

        .in{
            background-color: green;
            width: 50%;
            height: 50%;

            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="in"></div>
    </div>
</body>
</html>

2. position

  • 子绝父相,设置子元素的left:50%
  • 设置绝对子元素的 margin-left:元素宽度的一半px; 或者设置transform: translateX(-50%);
  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: yellow;
            width: 300px;
            height: 300px;
            position: relative;
        }

        .in{
        width: 100px;
        height: 100px;
        background-color: green;

        position: absolute;
        left: 50%;
        margin-left: -50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="in"></div>
    </div>
</body>
</html>

3. display:flex

  • 为父元素添加属性 两个属性即可
  • display: flex;
  • justify-content: center;
  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: yellow;
            width: 300px;
            height: 300px;
            display: flex;
            justify-content: center;

        }

        .in{
        width: 100px;
        height: 100px;
        background-color: green;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="in"></div>
    </div>
</body>
</html>

水平垂直居中

display

  • 子绝父相,添加几个属性即可
  • top: 0;
  • right: 0;
  • bottom: 0;
  • left: 0;
  • margin: auto;
  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: yellow;
            width: 300px;
            height: 300px;
            position: relative;
        }

        .in{
        width: 100px;
        height: 100px;
        background-color: green;

        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="in"></div>
    </div>
</body>
</html>

display

  • 子绝父相
  • left: 50%;
  • top: 50%;
  • margin-left: --元素宽度的一半px;
  • margin-top: --元素高度的一半px;
  • 代码实现
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            background-color: yellow;
            width: 300px;
            height: 300px;
            position: relative;

        }

        .in{
        width: 100px;
        height: 100px;
        background-color: green;

        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="in"></div>
    </div>
</body>
</html>
weixin_51692246
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
flex布局结合Before伪元素
海涛高软
11-04 1566
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { .
CSS 居中方法总结
qq_53568186的博客
08-29 286
CSS居中方法——包括行内元素、块级元素
:before伪类content实现垂直居中
gaidandan的专栏
04-10 6570
设置display: inline-block;的标签i与span标签一起会导致元素垂直不对齐，通过给i标签设置伪类before，content的不可为空，从而实现垂直居中。 未设置伪类before <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt...
伪元素 文本居中
weixin_44899684的博客
07-12 1414
问题： 使用伪元素 ::before后，影响了其原来的文本位置，使其下沉。 .searchBox { width: 100%; margin: 8px 10px; height: 24px; line-height: 24px; font-size: 12px; border: 1px solid #ccc; } .searchBox::before { content: ""; display: inline-block; ma.
CSS元素居中大全
2401_83703893的博客
03-29 916
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里获取！前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里获取！[外链图片转存中…(img-0HHio7Xx-1711654868225)][外链图片转存中…(img-qbyPw8VM-1711654868225)]
CSS 实现居中的各种方式
喵喵喵的博客
05-22 2763
总结实现水平居中、垂直居中、水平垂直居中的各种方式
8种css居中实现的详细实现方式了
热门推荐
buruyang的博客
07-12 2万+
八种实现方式，拿去用吧
CSS 实现居中的几种方法
qq_45371853的博客
05-31 3843
**CSS 实现居中的几种方法**一、前言二、常见的方法方法一：margin和width实现方法二：inline-block和父元素text-align方法三：浮动实现水平居中方法四：绝对定位实现方法五：css3的flex实现方法六：css3的fit-content 一、前言 居中效果在CSS中很是普通的效果，平时大家所看到的居中效果主要分为三大类：水平居中、垂直居中和水平垂直居中。而其中水平居中相对于后两者来说要简单得多。使用了css3的flexbox的属性轻松实现多行文本水平垂直居中的方法。当然大家有可
利用纯CSS实现居中的七大方法示例
09-24
`实现居中。需要注意的是，为了防止行内元素之间的空白间隙，父元素的`font-size`应设置为0。此方法要求已知父元素高度，且仅兼容IE8+。 2. **table-cell居中法** 父元素设置`display: table-cell;`，同时使用`...
使用css实现div垂直居中的示例
09-25
在本示例中，我们使用了`absolute`定位来实现居中。 `#main`是外层的`div`，它的`position`被设置为`absolute`，这意味着它将相对于最近的非`static`定位的祖先元素进行定位。同时，`left:50%`和`top:50%`将`#main`...
CSS实现定位元素居中的方法
09-25
随着CSS3的引入，我们可以利用`transform`的`translate`功能来更灵活地实现居中。`translate`允许我们将元素在其自身坐标系内平移。例如： ```css .element { width: 600px; height: 400px; position: absolute;...
CSS垂直居中实现方法大全
09-25
这种方法将内部元素的定位设为绝对，然后将其`top`属性设置为容器高度的一半，加上自身高度的一半的负值，实现居中。例如： ```css .content { position: absolute; height: 240px; } .child { position: ...
[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式
qq_45831414的博客
07-08 278
【代码】[Vue3 + TS + Vite] 获取网页选中内容的字符串格式或HTML格式。
一文清晰了解HTML——简单实例
weixin_73074505的博客
07-08 241
1.img中src有绝对路径、相对路径及网络路径之分。其中相对路径有../上一目录 ./当前目录 （./可省略） 命令。 【上述为网络路径】 2. img还有width与heigh，单位可为px（像素）一般屏幕分辨率为1024*768；可为百分比，意为占body长或高的百分之多少。
html的作业
2301_79807099的博客
07-06 565
【代码】html的作业。
HTML 基础
最新发布
2302_77179144的博客
07-11 562
文章目录HTML 结构认识 HTML 标签HTML 文件基本结构快速生成代码框架HTML 常见标签注释标签标题标签: h1-h6段落标签: p换行标签: br格式化标签图片标签: img超链接标签: a表格标签列表标签表单标签form 标签input 标签label 标签select 标签textarea 标签无语义标签: div & span综合案例: 填写简历信息Emmet 快捷键HTML 特殊字符 HTML: 页面有哪些元素组成 CSS:这些元素的样式、布局、排版等 JS:这些元素之间如何交
Python爬虫教程第5篇-使用BeautifulSoup查找html元素几种常用方法
分享技术，记录思考和感悟
07-11 150
汇总介绍下查询html元素的一些方式，比如通过id查找、通过xpath查找、通过css查找等方式的最佳实践。
html js 3d z轴移动 实现星空
从事厨房信息化行业，万能对接所有点餐系统，kds，智能控菜，酒店协调软件
07-11 63
用chatgpt还有kimi 让实现动画效果的星空，都太垃圾了。我要z轴移动，他们就是搞不出来，不是y轴移动，就是x轴移动，ai写代码还有很长的路。
HTML集成优雅的实时输入清除功能
你羡慕的生活都是你没熬过的苦。
07-11 269
通过上述步骤，我们可以轻松地在网页表单中实现一个实用且美观的实时输入清除功能。这不仅提高了用户交互的便利性，也增强了整体的用户体验。希望这篇文章能帮助你优化自己的网站或应用程序的用户界面设计。
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动).docx
01-19
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动).docx

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

weixin_51692246

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值