【前端学习】CSS——div垂直水平居中

最新推荐文章于 2023-05-15 17:27:12 发布
最新推荐文章于 2023-05-15 17:27:12 发布
阅读量137 收藏
点赞数
分类专栏： 前端 css html 文章标签： css html flex css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sw520lkm/article/details/117558683
版权
前端 同时被 3 个专栏收录
2 篇文章 0 订阅
订阅专栏
css
2 篇文章 0 订阅
订阅专栏
html
2 篇文章 0 订阅
订阅专栏

Author：Vivi
Time：2021-06-04

采用四种方式实习div块级元素垂直水平居中：
①position定位（子绝父相）
②position定位（子绝父相）+transform
③display:table-cell+vertical align:middle
④flexbox弹性盒子 display:flex+justify content:center+align item:center

<!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>
        .box1{
            width: 200px;
            height: 200px;
            background-color: red;
            position: relative;
        }
        .box1 .content1{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -50px 0px 0px -50px; 
        }
        
        .box2{
            width: 200px;
            height: 200px;
            background-color: lightblue;
            position: relative;
        }
        .box2 .content2{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: grey;
            position: relative;
            display: table-cell;
            vertical-align: middle;
        }
        .box3 .content3{
            width: 100px;
            height: 100px;
            background-color: indianred;
            margin-left: auto;
            margin-right: auto;
        }
        .box4 {
            width: 200px;
            height: 200px;
            background-color: blue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box4 .content4 {
            width: 100px;
            height: 100px;
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <p>position</p>
    <div class= "box1">
        <div class= "content1"></div>
    </div>
    <p>position+transform</p>
    <div class= "box2">
        <div class= "content2"></div>
    </div>
    <p>display:table-cell vertical-align:middle</p>
    <div class= "box3">
        <div class= "content3"></div>
    </div>
    <p>flexbox</p>
    <div class= "box4">
        <div class= "content4"></div>
    </div>
</body>
</html>
~天天天蓝~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div框水平垂直居中跟内容垂直居中.html
03-31
div框水平垂直居中跟内容垂直居中
如何使div垂直水平居中的css代码
09-25
很多人都会遇到这样的问题：如何使DIV居中,div垂直居中,div水平居中.
html如何让div上下居中 css,前端面试CSS系列——DIV垂直水平居中
weixin_42360722的博客
06-16 170
怎么让一个div 垂直水平居中代码片段// HTML绝对定位.parent{position:relative;}// 第一种.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}// 第二种(需要固定宽高).child{position:absolute;width:100px;height:100px...
前端css设置div垂直水平居中的方法总结
LIMI_伞梦的博客
02-19 711
前端css设置div垂直水平居中的方法总结1、定位+偏移2、间距3、flex布局4、grid布局5、定位+外边距 1、定位+偏移 需要用到position: relative; position: absolute; transform: translate(); .about{ width: 100%; height: 600px; margin: 20px auto 0; position: relative; background: aquamarine;
css实现div垂直水平居中的2种常用方法
dise8262的博客
06-03 573
方法1： 利用vertical-align：middle进行垂直方向上的居中对齐，此方法需要满足的条件： 设置父元素的行高line-height等于父元素height的高度 子元素必须是行内块级元素display:inline-block; 子元素设置vertical-align：middle 此方法在开发中不能右浮动(不能靠右边) 下方是完整代码，可以新建一个HTML文件进行测试(绿色...
[Div] 前端基础：div简介
Mr_TianSDQ的博客
05-15 177
3.Margin详解。4.Margin父子。
前端入门篇之div
weixin_34038293的博客
02-09 451
由于之前没有做过前端的开发工作，在现在的前端开发工作中遇到许多坑，有关于javascript的，有关于css样式的，所以想在这里总结一下。文章的结构的可能会比较混乱，同一篇文章可能会有多次的修改。 div显示在同一行中 div是块级元素，默认是不会显示在同一行的，但是可以通过如下方式，让div元素显示在同一行中。 使用float样式 ...
使用css实现div垂直居中的示例
09-25
主要介绍了使用css实现div垂直居中的示例,需要的朋友可以参考下
CSS教程之div垂直居中的多种方法
09-24
主要为大家详细介绍了CSS教程之div垂直居中的多种方法，还包括多行文本垂直居中的方法，感兴趣的小伙伴们可以参考一下
DIV水平垂直居中css实现代码
12-13
主要代码： position:absolute; top:50%; left:50%; margin-top:-(height/2); margin-left:-(width/2) <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...<...
【前端】DIV & CSS
风信子
10-15 480
DIV相关的技术 div它是一个html标签，一个块级元素（单独显示一行）。它单独使用没有任何意义，必须结合CSS来使用。它主要用于页面的布局。 span它是一个html标签，一个内联元素（显示一行）。它单独使用没有任何意义，必须结合CSS来使用。它主要用于对括起来的内容进行样式的修饰。 CSS概述 CSS指层叠样式表（Cascading Style Sheets） 样式定义如何显示HT...
前端-DIV+CSS
怕秃头的潘s的博客
03-08 157
2.1 DIV 相关的技术Div 它是一个 html 标签，一个块级元素(单独显示一行)。它单独使用没有任何意义，必须结合 CSS 来使用。它主要用于页面的布局。Span 它是一个 html 标签，一个内联元素(显示一行)。它单独使用没有任何意义，必须结合 CSS 来使用。它主要用于对括起来的内容进行样式的修饰。2.2 CSS 相关的知识 什么是 CSS？HTML：它是整个网站的骨架。CSS：它...
前端设计 最详细的div介绍+效果图+代码图
m0_61123456的博客
10-16 5775
楼主刚学不久 ， 学到css 发现十分有趣和好玩，今天跟大家分享一下 CSS中，div 标签的介绍，这也是我上课的笔记 div ，用得非常多的标签，也是最重要的标签 本身是一个html的标签， 特点： div默认宽度为100%，高度为0. 本身不支持高度 宽度属性，但可以通过css 来设置 语法： 《div》《/div》 应用场景 本身没有过多的自带属性或者样式，所以div可塑性很高。同时也是 div+css 布局的核心。 div默认单独显示在一行 ...
[前端]CSS的DIV归纳
对未知的一切抱有热忱
07-10 253
确定一个父盒子，三个子盒子，父亲可能要用relative包裹&lt;div class="father"&gt; &lt;div id="c1"&gt;子盒子一&lt;/div&gt; &lt;div id="c2"&gt;子盒子二&lt;/div&gt; &lt;div id="c3"&gt;子盒子三&amp
前端小白对DIV的一些理解
m0_49266584的博客
10-10 1330
前段刚刚入门，我说一下我作为一个小白来说一下对DIV的理解。 DIV是一个很重要的标签，网页的制作是离不开DIV的，DIV可以包裹不同的元素，为不同的元素设计不同的样式。 我通常一个DIV理解成一个盒子，在DIV里面嵌套不同的DIV就是在盒子里面放不同的盒子，一层套一层，我把它理解成金字塔的俯视图一样。 DIV是一个块级元素，它包含的元素会自动换行。例如： <!DOCTYPE html> <html lang="en"> <head> <meta char
CSS+DIV——前端er必备基础
周洲 （Julie）
02-13 2104
B/S真是一个长见识的阶段，认识了很多前端必备的语言，随着时间的增加，本以为新闻发布系统中学到的那些我还不知道是什么的东西，会早已没了印象。但反而却更加深刻了，当时还不知道什么是CSS，就学会了写CSS。还不是什么是异步通信，就学会了用AjaX。当看到视频中的经典框架时，才发现，这不就是新闻发布系统中用到的CSS+DIV么！(⊙o⊙)哦，原来我早就会写了！ 一、为什么是DIV+CSS 看到这个
html ur是什么意思_重新理解前端HTML+CSS篇div和span不是够用了吗？
weixin_39566387的博客
10-24 467
大家好我是落尘，一名新进晋级的菜鸟小编，也是一名前端开发攻城狮，从今天起带大家重新理解前端，重新学习前端，让大家有新的理解，每天都会更新些前端知识，如果小主们觉得还可以那就关注一下吧！今天这篇是我们正式开篇的第一篇文章，我想和你聊聊 HTML。我猜屏幕那一边的你估计会说：“HTML 我很熟悉了，每天写，这不是初级程序员才学的内容么，这我还能不会吗？”其实在我看来，HTML 并不简...
盒子居中 方法
xtyxtyxtywq的博客
09-23 594
盒子居中 方法
CSS 实现DIV水平垂直居中(二)
qq_42758330的博客
02-22 648
上期介绍了CSS实现div水平居中的五种方法，下面介绍CSS实现div垂直居中的几种方法。弹性布局实现div垂直居中的思路是一样的,当我们没有对主轴进行设置时，使用。标签，设置高度100%，再将d2和这个空的span设置为。上下留白实现视觉效果上的垂直居中。,思路和水平居中是一样的，详解可以看上一篇。5.通过定位实现div垂直居中。弹性布局实现div垂直居中。定位实现div垂直居中。标签实现div居中对齐。这里呢我们首先在d1中添加一个空的。对垂直方向进行设置。
css的div内元素垂直水平居中
最新发布
07-20
要在CSS中实现div内元素的垂直水平居中，可以使用以下方法： 1. 使用flex布局： ```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` 2....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值