常见的css 实现水平垂直居中方法有哪些？（附10种）

最新推荐文章于 2023-08-02 23:06:40 发布
VIP文章 最新推荐文章于 2023-08-02 23:06:40 发布
阅读量239 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abc465200/article/details/116096530
版权

文章目录

十种方法实现水平垂直居中

效果：image-20210424170407451

这里:left:50%是相对于父元素的50%,并且是从左上角开始算的

这里：-margin是相对于子元素自身的

需要居中元素固定宽高的3种

法1：absolute配合负margin
法2：absolute配合上下左右0；margin auoto
法3：absolute配合calc(50% - 25px)，注意calc空格

html

  <div class='wp'>父亲
      <div class='box'>儿子</div>
  </div>

css

.wp{
   
  border:1px solid red;
  height:400px;
  position:
最低0.47元/天 解锁文章
小峰同学的前端之路
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css实现元素水平垂直居中常见的两种方式实例详解
09-24
主要给大家介绍了css实现元素水平垂直居中的两种方式，文中给出了完整的示例代码供大家参考学习，对大家的学习或者工作具有一定的参考价值，有需要的朋友们下面来一起看看吧。
CSS实现水平垂直居中的6种方式
热门推荐
weixin_44370837的博客
05-11 3万+
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 在开发中经常需要实现的一个页面效果是：元素的垂直居中。 在此记录一下，经常适用的几种方法 前提：元素之前的布局关系如下，需要实现class为son该元素的垂直居中 <style> .son { width: 200px; height: 200px; background-color: p
css垂直居中的6种方式
weixin_42974827的博客
09-08 1万+
这里实现了比较常用的垂直水平居中的方案，十分有用，希望对于面试必考题来说，只要熟练掌握前面三种，基本上是没有问题了，源码我会放在本人主页的资源里面，供大家免费下载，创作不易，关注一下，后续将带来vue版本大屏可视化解决方案。敬请期待吧~~~❤️。
CSS实现水平垂直居中的五种方法
Ned的CSDN博客
12-22 6002
前言 今天来看看一个之前困扰我很久的问题，在CSS中，水平垂直居中，能有几种写法。 方法一：margin:auto 子绝父相，当元素绝对定位的时候，会根据最近父元素进行定位，利用这个特性，我们有了这种方法。 CSS代码： div{ width: 600px; height: 600px; position: relative; border: 1px solid #000000; } img{ position: absolute; margin: auto
CSS实现元素水平垂直居中的各种方法
Kotlin0139的博客
07-16 1万+
在设计网页页面的过程中，总会有将元素或者文字进行水平或者垂直居中的要求，各种CSS样式调整，搞的头都大了。这里将会介绍CSS中几种常用到的水平垂直居中的方法，希望能够对你有所帮助。...
CSS垂直居中的几种方法
m0_72838183的博客
10-04 6683
推荐大家几种常见的css垂直居中的方法，便于不同的场景使用，也方便大家面试时有更多的思路，如果大家有更好更多的方法，欢迎留言讨论
使用CSS实现盒子水平垂直居中的方法(8种)
01-18
原始代码： ... <!...<... <...meta name=viewport content=width=device-width, initial-scale=1.0>...link rel=stylesheet href=center.css> </head> <body> <div class=son><
CSS水平垂直居中的几种方法总结
09-24
主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法，有兴趣的可以了解一下。
CSS 实现垂直居中的几种方法(必看)
12-13
说到居中，很多人第一反应应该是水平居中，说到水平居中，肯定道友们有一万种方法做到，CSS3 的FlexBox更是强大到没朋友。但是良辰今天想聊的是 CSS 垂直居中的方法，下面是萌萌的分割线。神马？你敢说不萌？ •方式...
全面总结使用CSS实现水平垂直居中效果的方法
01-19
说起水平垂直居中大家常看到的是...接下来我们就针对这个自设问题，来一起探讨其他几种实现水平垂直居中的方案。 为了更好的阐述后面的方案，我们这里有一个命题：让未知大小容器（未知行数的文本）实现水平垂直居中。
CSS 垂直居中的七种方法——史上最详细总结
qq_37384271的博客
10-10 2万+
我们在写页面时，通常会用到水平居中或垂直居中，而水平居中很好处理，不外乎就是设定 margin: 0 auto; 或是 text-align: center; “垂直居中”却比较麻烦，下面介绍七种纯 CSS 实现垂直居中的方式。 一、设定行高（line-height） 设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”（inline、inline-block），例如单行的标题，或是已经设为 inline-block 属性的 div，若将 line-height 设成和高度一样的数值，则内容的行内元
css 居中问题的总结
qq_43889848的博客
05-15 2209
1.css让浮动的盒子水平居中 解决方法： 给浮动的盒子加一个父盒子，设置宽度跟浮动盒子一样大小，并且overflow:hidden; 设置该盒子为margin: 0 auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin:
css水平垂直居中四种常用方式
CSDdas的博客
05-10 3695
css水平垂直居中四种常用方式
CSS实现垂直居中的7种方法
c_x_m的博客
03-04 1万+
CSS实现垂直居中的7种方法1、设定行高(line-height)2、设置伪元素::before3、absolute + transform4. 设置绝对定位5、设置display:flex6、absolute + calc7. display:table-cell实现CSS垂直居中。 1、设定行高(line-height) HTML： <div class="parent"> <span class="child">你好</span> </div>
CSS垂直居中的12种实现方式
weixin_34348111的博客
01-15 367
使用绝对定位和负外边距对块级元素进行垂直居中 HTML &lt;div id="box"&gt; &lt;div id="child"&gt;&lt;/div&gt; &lt;/div&gt; 复制代码 CSS #box { width: 300px; height: 300px; background: #ddd; position: relative; ...
CSS实现垂直居中的十五种方法
guanguan0_0的博客
10-17 4918
情景一：单行文字垂直居中 1、line-height 原理是在于将单行文字的行高设定后，文字会位于行高的垂直中间位置 &lt;div class="text-con"&gt;单行文字垂直居中&lt;/div&gt; &lt;style&gt; .text-con { width: 200px; height:60px; line-...
CSS垂直居中的7个方法：
最新发布
qq_51904231的博客
08-02 2369
使用flex布局（最优），仅需3行代码！
css 实现垂直居中的五种方法
weixin_47192515的博客
08-31 2802
css实现垂直居中的五种方法
CSS实现垂直居中的5种方法
m0_56649557的博客
08-20 1万+
第一种 position定位+margin负距离 前提是知道居中元素的宽高，首先给居中元素定位，之后设置margin的负距离为具体宽高的一半便可达到垂直居中效果 <style> .box1 { height: 300px; width: 300px; border: 10px solid pink; position: relative; } .
css实现水平垂直居中
04-26
好的，关于CSS实现水平垂直居中，常见的方法有以下几种： 1.使用flex布局 如果父元素使用flex布局可以通过以下代码实现水平垂直居中： ```css .parent { display: flex; justify-content: center; align-items...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值