CSS垂直居中指南

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

1、可以用一个自然高度的容器吗？

给容器加上相等的上下内边距让内容居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
        	/* 关键样式 */
            padding: 4em;
            /* 基本样式 */
            color: #fff;
            background-color: #0072b0;
            border-radius: .5em;
            /* 水平居中 */
            text-align: center;
        }
    </style>
</head>
<body>
    <div>这是测试用的文字</div>
</body>
</html>

在这里插入图片描述

2、容器需要指定高度或者避免使用内边距吗？

指定高度，对容器使用display: table-cell和vertical-align: middle。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            /* 指定宽、高 */
            height: 200px;
            width: 600px;
            /* 关键样式 */
            display: table-cell;
            vertical-align: middle;
            /* 基本样式 */
            color: #fff;
            background-color: #0072b0;
            border-radius: .5em;
            /* 水平居中 */
            text-align: center;
        }
    </style>
</head>
<body>
    <div>这是测试用的文字</div>
</body>
</html>

3、可以用Flexbox吗？

如果不需要支持IE9，可以用Flexbox居中内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            /* 关键样式 */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
            /* 基本样式 */
            color: #fff;
            background-color: #0072b0;
            border-radius: .5em;
        }
    </style>
</head>
<body>
    <div>这是测试用的文字</div>
</body>
</html>

在这里插入图片描述

4、容器里面的内容只有一行文字吗？

设置一个大的行高，让它等于理想的容器高度。这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为inline-block。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            /* 关键样式 */
            display: inline-block;
            line-height: 10rem;
            /* 基本样式 */
            width: 500px;
            color: #fff;
            background-color: #0072b0;
            border-radius: .5em;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>这是测试用的文字</div>
</body>
</html>

在这里插入图片描述

5、容器和内容的高度都知道吗？

将内容绝对定位。（只有当前面提到的方法都无效时才推荐这种方式。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 容器宽高 */
        div{
            width: 600px;
            height: 300px;
            background-color: #0072b0;
        }
        /* 内容宽高,内容高度为22px，
           top: （容器高度-内容高度）/2
           left:（容器宽度-内容宽度）/2
        */
        p{
            width: 200px;
            background-color:sandybrown;
            /* 关键样式，需要进行计算距离 */
            position: absolute;
            top: 139px;
            left: 200px;
        }
    </style>
</head>
<body>
    <div>
        <p>这是测试用的文字</p>
    </div>
</body>
</html>

在这里插入图片描述

6、不知道内部元素的高度？

用绝对定位结合变形（transform）。（还是只有当前面提到的方法都无效时才推荐该方法。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 容器宽高 */
        div{
            width: 600px;
            height: 300px;
            background-color: #0072b0;
            /* 相对定位 */
            position: relative;
        }
        p{
            width: 200px;
            background-color:sandybrown;
            /* 绝对定位 */
            /* 关键样式 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div>
        <p>这是测试用的文字</p>
    </div>
</body>
</html>

在这里插入图片描述

最后推荐一个有意思的网站，可以根据自己场景相应的生成垂直居中的代码。howtocenterincss

在这里插入图片描述

类仁猿
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css设置按钮竖直方向居中_CSS实现水平垂直居中的1010种方式（史上最全）
weixin_39782782的博客
12-21 1126
划重点，这是一道面试必考题，很多面试官都喜欢问这个问题，我就被问过好几次了要实现上图的效果看似很简单，实则暗藏玄机，本文总结了一下CSS实现水平垂直居中的方式大概有下面这些，本文将逐一介绍一下，我将本文整理成了一个github仓库，欢迎大家star仅居中元素定宽高适用absolute + 负marginabsolute + margin autoabsolute + calc居中元素不定宽高abs...
CSS中的垂直和水平居中完全指南
09-25
1. **单行文本的垂直居中**：对于只有一行文本的元素，可以使用`line-height`与元素高度相等来实现垂直居中。 2. **固定高度的块级元素**：若元素高度是固定的，可以使用绝对定位配合`top`和`bottom`属性设置为`50%...
CSS如何居中元素
weixin_30642267的博客
07-27 70
How to center in CSS 一步步拆解你的需求，是水平居中还是垂直居中？还是水平垂直居中？父容器是inline还是block，高度知不知，宽度造不造？一个子元素还是多个子元素？一行还是多行？文字？图片？ 理论知识 属性：text-align 用法：text-align CSS 属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align并不控制块级元素自己的对齐...
howtocenterincss：CSS生成器，用于将textdiv居中，具体取决于其大小或容器大小
02-20
如何在CSS中居中 以CSS为中心是一个麻烦。 取决于各种因素，似乎有数不胜数的方法可以做到这一点。 这样可以合并它们，并为您提供每种情况所需的代码。 这是满足对齐需求的代码生成器。
css各种情况下居中的方法
03-24 88
推荐博客： https://css-tricks.com/centering-css-complete-guide/ http://howtocenterincss.com/#contentType=div&horizontal=center&vertical=middle&browser.IE=6 其中在不确定height的情况下使用transfor...
css 超链接居中,CSS居中：完全指南（译） | Eamonn
weixin_31507527的博客
08-04 4478
CSS的居中是众多CSS难点的代表。为啥用CSS居中这么难呢？但是我认为这个问题其实并没有那么难啦，就是有很多种不同的方式可以达到居中的目的，这取决于不同的情景，很难说用哪一种方式去实现居中。所以就让我们做一个决策树，希望能使这个问题简单一点吧~水平居中行内或者具有行内元素性质的元素(比如文字或者链接)？让一个父元素为块级元素的行内元素水平居中，可以：CSS:123.center-children...
h5居中loading_css元素居中指南
weixin_39772652的博客
12-20 308
如有错误，欢迎指正。更多内容查看GitHub一、元素分类首先要知道元素分三种：内联元素(行内元素)、块级元素、内联块级元素。1、内联(行内)元素可与其他元素占一行高、行高、内外边距不可更改宽度为内容所占宽度，不可更改容纳文本或其他行内元素2、块级元素独占一行高、行高、内外边距可更改不设置宽度的话宽度默认为容器的100%可容纳行内元素和块级元素3、内联块级元素可与其他元素在一行高、宽、行高以及上下边...
CSS元素居中指南
lzy_1112的博客
10-09 1106
css元素居中指南大全；css元素各种居中方法
如何使用 CSS 使表格居中（快速指南）
热门推荐
allway2的博客
07-02 2万+
在网页设计中使用表格有一段有趣的历史。在采用 CSS 之前，表格不仅仅用于以传统方式显示表格数据练习列表，而是更常用于控制完整的页面布局。那时，HTML 表格用于定义网页的结构和视觉外观，其中表格的位置可以直接在 HTML 中指定。例如，要将表格的对齐方式设置为中心，可以简单地编写： 但是，以这种方式对齐表格不再正确，并且在 HTML5 中已被弃用。这是因为现代 Web 标准规定了结构 (HTML) 和样式 (CSS) 的分离，而上述方法违反了该原则。绝不应该使用 HTML 来设置元素的显示方式；这就是
CSS居中指南
Mosum的博客
08-27 622
粗略地翻译自Centering in CSS一文，主要还是梳理一下CSS中的各种居中方式，也方便自己平时查阅，个人觉得还是比较实用的。
CSS中的文本属性学习指南
12-13
5. **文本对齐(text-align)**: `text-align`属性用于设置文本的水平对齐方式，可选值有`left`（左对齐）、`right`（右对齐）、`center`（居中）和`justify`（两端对齐）。例如：`p {text-align:right;}` 右对齐段落...
CSS3的Flexbox布局的简明入门指南
09-24
【CSS3的Flexbox布局简明入门指南】 Flexbox，全称为Flexible Box，是CSS3引入的一种全新的布局模式，旨在解决复杂多变的网页布局问题。Flexbox允许开发者以更加灵活的方式控制元素的排列、对齐和尺寸调整，特别是...
jQuery实现不同弹窗大小均垂直居中效果.zip
09-21
本项目“jQuery实现不同弹窗大小均垂直居中效果”旨在教你如何利用jQuery创建一个灵活的弹出窗口，无论窗口大小如何，都能在页面上保持垂直居中。 首先，我们需要理解jQuery的核心概念。jQuery通过选择器（如$("#id...
CSS div文本垂直居中
qq_21700537的博客
08-31 309
CSS div文本垂直居中  问题：vertical-align，在div中设置文本垂直居中，是不起作用的。那怎么样设置div的文本垂直居中哦！ 关于"CSS文本垂直居中"的文章在网上可以找到很多，它们主要涉及3种方法： 1、单行文本垂直居中： 方法：把文本段落高度(line-height)和所在区域高度(height)设为一致即可。 缺点：这种方法只
CSS实现图片边框酷炫效果
流绪@微梦
07-26 1260
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
CSS学习笔记
ngczx的博客
07-23 631
CSS学习笔记
qt练习控件label控件-lineEdit控件样例代码
最新发布
07-30
qt练习控件label控件-lineEdit控件样例代码
【JCR一区级】麻雀搜索算法SSA-CNN-LSTM-Attention故障诊断分类预测【含源码 5689期】.zip
07-30
CSDN海神之光上传的全部代码均可运行，亲测可用，直接替换数据即可，适合小白； 1、代码压缩包内容 主函数：Main .m； 数据； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，可私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开除Main.m的其他m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描博主博客文章底部QQ名片； 4.1 CSDN博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作 智能优化算法-CNN-LSTM-Attention分类系列程序定制或科研合作方向： 4.4.1 遗传算法GA/蚁群算法ACO-CNN-LSTM-Attention分类 4.4.2 粒子群算法PSO/蛙跳算法SFLA-CNN-LSTM-Attention分类 4.4.3 灰狼算法GWO/狼群算法WPA-CNN-LSTM-Attention分类 4.4.4 鲸鱼算法WOA/麻雀算法SSA-CNN-LSTM-Attention分类 4.4.5 萤火虫算法FA/差分算法DE-CNN-LSTM-Attention分类
全面解析CSS样式属性指南
- `text-align`: 设置文本对齐方式，包括`justify`两端对齐，`left`左对齐，`right`右对齐，`center`居中。 - `text-indent`: 段落首行缩进，如`text-indent: 2em;`。 - `vertical-align`: 垂直对齐，可选`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值