css实现水平垂直居中的具体代码

最新推荐文章于 2022-09-10 10:45:00 发布
最新推荐文章于 2022-09-10 10:45:00 发布
阅读量352 收藏
点赞数 1
分类专栏： 前端学习 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/llxgdy/article/details/107345383
版权
本文是根据B站周啸天老师的视频学习笔记，介绍了四种方法实现CSS水平垂直居中：1. 使用定位方式，需要知道元素的具体尺寸；2. 利用Flex布局，不需要知道尺寸但兼容性有限；3. 通过JavaScript动态控制；4. 将父元素设为table-cell，子元素设为文本块，但父元素尺寸需固定。
摘要由CSDN通过智能技术生成

以下内容为b站周啸天老师视频学习记录，点击看视频

一、通过定位方式实现
1.

body{
   
  position: relative;
}
.box{
   
  position:absolute;
  top:50%;
  left: 50%;
  margin-top:-25px;
  margin-left: -50px;
}

注：必须知道具体高宽

.box{
最低0.47元/天 解锁文章
X 前端成长记
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
垂直居中、水平居中的多种方法总结，含代码
hhhh
04-27 840
文本、行内元素 块级元素 自适应内容的块级元素 基础方法 行内元素水平居中 text-align:center；//父元素属性 行内元素垂直居中 height:100px；//父元素属性 line-height:100px；//父元素属性行高==高度即可 大小确定的块级元素 margin：auto；//自身 使用position的absolute实现居中 #father{ width:100px; height:100px; background-color: aqua;
CSS实现元素水平垂直居中的各种方法
热门推荐
Kotlin0139的博客
07-16 1万+
在设计网页页面的过程中，总会有将元素或者文字进行水平或者垂直居中的要求，各种CSS样式调整，搞的头都大了。这里将会介绍CSS中几种常用到的水平垂直居中的方法，希望能够对你有所帮助。...
垂直水平居中的代码
weixin_34365635的博客
06-24 507
（1）：text-align + line-height实现单行文本水平垂直居中 <style> .test{ text-align: center; line-height: 100px; } </style><body> <div class="test" style="width: 200px;">测试文字<...
用 css 实现水平垂直居中
Y2ANG
04-10 1415
用 css 实现水平垂直居中的8种方式 效果图 本文将会用多种方式实现上图效果，接下来一一列举。 基本布局 /* 样式 */ .parent { width: 200px; height: 200px; border: 1px solid black; } .parent .son { width: 100px; height: 100px; background-color: aqua; } /* 布局 */ <div class="parent"&
教你如何用纯CSS代码实现垂直居中
Mr.小灰狼_随笔
07-05 2860
教你如何用纯CSS代码实现垂直居中 在编辑一个页面时，通常用到 水平居中 和 垂直居中， 而水平居中很好处理，不外乎就是 设定 margin: 0 auto; 或是 text-align: center; 就能轻松解决掉水平居中的问题，但一直以来最麻烦的对齐问题， 都是 “垂直居中” 这个讨人厌的设定， 以下将介绍五种单纯利用 CSS 来实现 目录 方法1：设定行高 ( line-height ) 方法2：绝对定位 方法3：利用 transform 方法4：使用表格或假装表格 方法5：使用 Flexbox.
html水平垂直绝对居中代码,一起搞懂 CSS 水平居中与垂直居中的16个方法
weixin_32421297的博客
07-02 487
一、水平居中1.1 行内元素.parent {text-align: center;}复制代码1.2 块级元素1.2.1 块级元素一般居中方法.son {margin: 0 auto;}复制代码1.2.2 子元素含 float.parent{width:fit-content;margin:0 auto;}.son {float: left;}复制代码1.2.3 Flex 弹性盒子1) flex ...
全面总结使用CSS实现水平垂直居中效果的方法
01-19
说起水平垂直居中大家常看到的是...接下来我们就针对这个自设问题，来一起探讨其他几种实现水平垂直居中的方案。 为了更好的阐述后面的方案，我们这里有一个命题：让未知大小容器（未知行数的文本）实现水平垂直居中。
使用CSS实现盒子水平垂直居中的方法(8种)
01-18
原始代码： center.html： <!DOCTYPE html> <html lang=Zh> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <title>...
猿创征文 | 【CSS】-- 实现垂直居中的五种方法（含代码）
qq_48802092的博客
09-10 329
【代码】猿创征文 | 【CSS】-- 实现垂直居中的五种方法（含代码）
CSS实现垂直水平居中的方法
zbslong的博客
08-24 340
在网上查到了很多种居中方法，但是都有一些局限，如通过line-height实现的情况不能设置100%。今天突然灵光一闪想到了一个办法，试了试感觉效果不错。下面直接上代码。 html： &lt;div class="body"&gt; &lt;div class="pos"&gt;&lt;/div&gt; &lt;div class="middle"&gt;&amp
如何实现元素水平垂直居中
coding
12-16 510
1）单行文本的居中 主要实现css代码： 水平居中：text-align:center; 垂直居中：line-height:XXpx; /*line-height与元素的height的值一致*/ s 2) 多行文本的垂直居中我们有很多种实现方式 1)使用display:table来实现 主要实现代码： display: table使块状元素成为一个块级表格; display: t...
水平垂直居中代码示例8种（直接可用）
furfur-jiang的博客
12-18 1169
flex grid table-cell margin + transform absolute + transform absolute + -margin absolute + margin:auto inline-block + vertical-align 案例展示： 代码：（直接可用） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta.
【CSS】CSS实现水平垂直居中
流萤梦的博客
08-27 373
元素水平垂直居中的场景很常见，常用的方法如下：（以下方法在chorme测试可行）
垂直水平居中 css
linecloud的博客
06-14 910
1实现原理： 1 设置 .main 元素为相对定位 position: relative;，这样其子元素设置绝对定位时就相对它了。 2 然后设置 .content 元素为绝对定位 position: absolute; 并设置它的 top、left、bottom、right 都为0， 3 这样该元素的元素的尺寸表现为“格式化宽度和格式化高度”，和 ...
CSS水平垂直居中
Gary Leong
09-06 336
CSS水平垂直居中
css 垂直居中_css水平垂直居中的几种方式
weixin_39955142的博客
11-29 72
css水平垂直居中的几种方式 - 读心悦​qingzhuyue.cn在前端岗位快三年了。布局中关于水平垂直两个方向居中的实现有几种方式：方式一：将容器设置为弹性容器，即display: flex;,在水平和垂直两个方向分别设置居中对齐。完整代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta char...
CSS实现垂直水平居中
谅至的博客
04-19 187
实现方法1.absolute+transform（代码最简单）transform：transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。样式表如下&lt;style type="text/css"&gt; .container { position: absolute; top: 50%; left: 50%; ...
CSS实现水平垂直居中
偉ing的博客
03-30 213
1 水平居中 ​ 首选讨论一下如何将一个元素进行水平居中。给定以下HTML代码。 <div class='box'> 水平居中 </div> ​ 通过css实现div的水平居中。 .box{ width:300px; height: 300px; margin: 0 auto; } ​ 首选设置box的宽度和高度，然后设置box外边距margin就可以实现水平居中。实现的原理很简单，利用了盒模型来解决这个问题。 ​ box的盒模型水平布局由以下7个
五种CSS技巧实现水平垂直居中
继续阅读文章，您可以学习如何利用Flexbox布局或者Grid布局来实现灵活且响应式的水平垂直居中。Flexbox的优点在于其直观易用，适应性强，而Grid布局则提供了更为精确的二维布局控制。这两种现代CSS布局技术都是实现...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值