CSS 实现垂直居中的几种方案

最新推荐文章于 2024-11-11 08:41:40 发布
最新推荐文章于 2024-11-11 08:41:40 发布
阅读量80 收藏
点赞数
文章标签： 数据库 xhtml php
原文链接：http://www.cnblogs.com/Slim-Shady/p/5582324.html
版权

最近在学关系型数据库相关，MySQL 和 Postgre,捎带着学了 PHP，为了练手这几天就忙着自己搭博客，项目部署在某云上，该云算是良心，给的空间自己搭博客用足够了。本来想着每日一bo的,所以有的时候实在来不及就只能隔天更新了。以后尽量发点东西出来，等博客搭完写一写 SQL 数据库基础相关的分享，给跟我一样的小白道友们做下参考，大神请直接无视~

说到居中，很多人第一反应应该是水平居中，说到水平居中，肯定道友们有一万种方法做到，CSS3 的FlexBox更是强大到没朋友。但是良辰今天想聊的是 CSS 垂直居中的方法，下面是萌萌的分割线。神马？你敢说不萌？

 

  • 方式一 ：table 布局方法
    • 直接上?：
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      </head>
      <body>
      <style>
          .container{
              width: 200px;
              height: 200px;
              font-weight:bold;">deepskyblue;
              display: table;
          }
          .cell{
              display: table-cell;
              vertical-align: middle;
              font-weight:bold;">lawngreen;
          }
          .content{
              font-weight:bold;">yellow;
          }
      </style>
          <div class="container">
              <div class="cell">
                  <div class="content">
                      Content
                  </div>
              </div>
          </div>
      </body>
      </html>
    • 效果：
    • 分析
      • 优点：content 高度可以动态改变，无须担心父级容器高度不够被截断；
      • 缺点：IE8 还没搞定。　　

 

  • 方式二：布局对象固定高度 
      • <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>vertical-center</title>
        </head>
        <body>
            <style>
                .container{
                    width: 200px;
                    height: 200px;
                    background-color: #003366;
                    position: relative;
                    text-align: center;
                    display: table;
                }
                .content{
                    width:100px;
                    height: 100px;
                    background-color: yellow;
                    position: absolute;
                    top:50%;
                    margin-top: -50px;
        　　　　     left:50%;
        　　        margin-left:-50px;  
                }
                .point{
                    width:50px;
                    height: 50px;
                    position: absolute;
                    top: 50%;
                    margin-top: -25px;
                    left:50%;
                    margin-left:-50px;
                    background-color: green;
                }
            </style>

            <div class="container">
                <div class="content">
                    <div class="point">
                        point goes here.
                    </div>
                </div>
            </div>
        </body>
        </html>
    • 就这样，我们实现了垂直和水平的居中
  • 上面提到的方法，都有局限性，下面介绍一种通用的方法，不过是 CSS3实现的，但是通用。
    • 　　 
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>haorooms不固定高度div写法</title> <style> .center { position: fixed; top: 50%; left: 50%; background-color: #000; width:50%; height: 50%; -webkit-transform: translateX(-50%) translateY(-50%); } </style> </head> <body> <div class="center"></div> </body> </html>
    • 看吧，我们只是吧 margin 变成translate，其他浏览器的写法如下：
      • 　　 
        -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
    • justify-content:center;//子元素水平居中 align-items:center;//子元素垂直居中 display:-webkit-flex;

       就先写这么多吧，先吃饭去啦~


 

转载于:https://www.cnblogs.com/Slim-Shady/p/5582324.html

dian07342
关注
CSS实现垂直居中的几种方法
09-25
本文将介绍几种有效的CSS垂直居中方法，以便开发者可以根据具体场景选择适合的方法。 1. 表格单元格方式 这种方法通过将容器设置为表格样式，然后将子元素设置为表格单元格并应用`vertical-align: middle`来实现...
css 垂直居中的几种实现方法
12-13
今天重新整理一下思路，说说前端在实现页面元素垂直居中的几种思路： 一、利用 position 和负边距 利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个...
使用 CSS 实现垂直居中的8种方法
热门推荐
秋天，黄叶坠地，凉风有信。
03-25 10万+
​​​​​​CSS垂直居中的8种方法 目录 ​​​​​​CSS垂直居中的8种方法 1、通过verticle-align:middle实现CSS垂直居中。 2、通过display:flex实现CSS垂直居中。 3、通过伪元素:before实现CSS垂直居中。 4、通过display:table-cell实现CSS垂直居中。 5、通过隐藏节点实现CSS垂直居中。 6、已知父元素高度通过transform实现CSS垂直居中。 7、到垂直居中的位置。 8、通过line-height实现...
Css实现垂直居中的几种方法
weixin_49693227的博客
02-15 224
Css实现垂直居中 垂直居中是布局中十分常见的效果之一，为实现良好的兼容性， 方法1：绝对定位和负边距 .box3{position:relative;}.box3 span{ position: absolute; width:100px; height: 50px; top:50%; left:50%; margin-left:-50px;
CSS实现水平垂直居中的几种方法
欢迎来到我的博客！我是一名全栈开发工程师，主攻前端开发。希望通过我的博客，能够与大家共同学习和成长。感谢您的关注和支持！
12-08 1260
作者：🤶马可家的菠萝在我们日常开发中，会经常涉及到元素水平和垂直居中的需求，而元素水平和垂直居中是实现美观布局的重要手段。本文将介绍几种常见的实现水平和垂直居中的方法，并分析各自的优缺点，帮助大家更好地掌握这一技能。元素示例综上所述，Flex布局和Grid布局在现代浏览器中表现优秀，是更推荐的选择。而行内元素方式、绝对定位+margin:auto方式、绝对定位（已知宽高）方式和Table布局方式在特定情况下可能适用。绝对定位（未知宽高）方式在实际应用中较少使用。
CSS常用水平垂直居中的几种方法
qq_33721778的博客
12-28 2万+
CSS水平垂直居中一、利用margin:auto二、利用position: absolute三级目录 一、利用margin:auto 元素有宽度和高度时，利用margin:auto设置元素水平垂直居中： HTML代码如下： <div class="div1"> <div class="center"></div> </div> CSS代码如下： .div1 { background-color: #eee; width: 200px; hei
CSS中实现水平居中、垂直居中的几种方法
listener_life的博客
03-28 2714
CSS中实现水平居中、垂直居中的几种方法
使用 CSS 实现垂直居中的5种方法
zhangwenok的博客
05-30 5771
css水平垂直居中方法以及应用 父元素 .parent 子元素.children 1、利用 flex 布局 /* 无需知道被居中元素的宽高 */ .parent{ display: flex; align-items: center; justify-content: center; } 2、子元素是单行文本 设置父元素的 text-align 和 line-height = height .parent{ height: 100px; line-.
CSS实现垂直居中的十五种方法
guanguan0_0的博客
10-17 8933
情景一：单行文字垂直居中 1、line-height 原理是在于将单行文字的行高设定后，文字会位于行高的垂直中间位置 &lt;div class="text-con"&gt;单行文字垂直居中&lt;/div&gt; &lt;style&gt; .text-con { width: 200px; height:60px; line-...
CSS实现水平垂直居中的五种方法
Ned的CSDN博客
12-22 6159
前言 今天来看看一个之前困扰我很久的问题，在CSS中，水平垂直居中，能有几种写法。 方法一：margin:auto 子绝父相，当元素绝对定位的时候，会根据最近父元素进行定位，利用这个特性，我们有了这种方法。 CSS代码： div{ width: 600px; height: 600px; position: relative; border: 1px solid #000000; } img{ position: absolute; margin: auto
CSS 水平垂直居中的7种方法 - 附示例
m0_48968874的博客
09-02 1375
【代码】CSS 水平垂直居中的七种方法 - 附示例。
CSS垂直居中的几种方法
m0_72838183的博客
10-04 7942
推荐大家几种常见的css垂直居中的方法，便于不同的场景使用，也方便大家面试时有更多的思路，如果大家有更好更多的方法，欢迎留言讨论
CSS 实现垂直居中的几种方法(必看)
12-13
最近在学关系型数据库相关，MySQL 和 Postgre,捎带着学了 PHP，为了练手这几天就忙着自己搭博客，项目...但是良辰今天想聊的是 CSS 垂直居中的方法，下面是萌萌的分割线。神马？你敢说不萌？ •方式一 ：table 布局方法
CSS水平垂直居中的几种方法总结
09-24
以下就是CSS实现水平垂直居中的几种常见方法： 1. 利用margin:auto实现居中 这是一种常见的居中方式，通常用于块级元素。通过设置元素的position属性为relative，并把left和top属性设为0，再将margin设为auto，...
07 Oracle数据库恢复基础解析：从检查点到归档，一步步构建数据安全防线
超哥的博客
11-09 1246
检查点是Oracle数据库中的一个特殊事件，它的作用是将内存中的数据块同步到磁盘上，以确保数据的持久性。简单来说，就是让数据库“记住”到目前为止所有的更改。Redo日志是Oracle用来记录所有数据更改的日志文件。每次对数据库进行修改时，都会先写入Redo日志，然后再写入数据文件。这样，即使系统崩溃，也能通过Redo日志恢复数据。当数据库运行在归档模式下时，一旦当前的Redo日志文件满，Oracle会将其复制到一个安全的存储位置，并标记为已归档。这样可以长期保留Redo日志，便于历史数据的恢复。
2024.11.6-Redis的事务与持久化
whisper_Java 的博客
11-06 863
MULTI、EXEC、DISCARD和WATCH 是 Redis 事务相关的命令。Redis的事务是将一系列待执行的指令存到一个Queue中，并使用exec执行事务。​--1. Redis事务是一个独立的隔离机制：事务中的所有命令都会序列化到queue、并按顺序地执行queue里的指令。事务在执行的过程中，不会被其他客户端发送来的命令请求所打断。​​multi: 用于开启事务，将待执行的命令放入到队列中exec命令:负责触发并执行事务中的所有命令：discard: 用于取消组队。
Redis - 事务
ketil27的博客
11-08 893
Redis 的事务和MySQL的事务概念上是类似的.都是把⼀系列操作绑定成⼀组.让这⼀组能够批量执 ⾏.弱化的原⼦性:redis没有"回滚机制".只能做到这些操作"批量执⾏".不能做到"⼀个失败就恢复到 初始状态".不保证⼀致性:不涉及"约束". 也没有回滚.MySQL的⼀致性体现的是运⾏事务前和运⾏后,结果都 是合理有效的,不会出现中间⾮法状态.不需要隔离性:也没有隔离级别,因为不会并发执⾏事务(redis单线程处理请求).
随堂测微信小程序ssm+论文源码调试讲解
最新发布
u014445459的博客
11-11 761
微信小程序，简称小程序，英文名Mini Program，是一种全新的连接用户与服务的方式，可以快速访问、快速传播，并具有良好的使用体验。小程序的主要开发语言是JavaScript，它与普通web的开发有很多相似之处。小程序和普通网页开发并不是相同的东西，是有差异的。网页开发的渲染线程和脚本线程是互斥的，而在小程序中，确实分开的，分别在不同的线程之中运行。
【达梦数据库】Oracle数据库通过DTS工具迁移数据到达梦数据库--索引数量存在出入
weixin_47686079的博客
11-06 170
【代码】【达梦数据库】Oracle数据库通过DTS迁移到达梦数据库索引数量不一致。
css垂直居中的几种方法
06-28
### 回答1： 实现垂直居中一直是Web前端开发中比较棘手的问题。下面介绍几种常用的CSS垂直居中的方法。 一、利用flex布局实现垂直居中 父元素设置display:flex; align-items:center; justify-content:center; 实现子元素的垂直居中。 二、利用绝对定位实现垂直居中 将子元素设置为绝对定位，通过设置top:50%; transform:translateY(-50%);实现子元素的垂直居中。 三、利用table-cell属性实现垂直居中 将父元素的display属性设置为table-cell，vertical-align属性设置为middle，实现子元素的垂直居中。 四、利用line-height属性实现垂直居中 将父元素和子元素的line-height属性设置为相同的值，并将子元素设置为display:inline-block，实现子元素的垂直居中。 综上所述，以上列举了常用的四种方法来实现CSS垂直居中，根据需要选择合适的方法来解决垂直居中问题。 ### 回答2： 在网页设计中，垂直居中是一个比较常见的需求。但是，实现垂直居中并不是一件容易的事情。在CSS中，有几种方法可以实现垂直居中，下面介绍一些常用的方法： 1.使用flexbox Flexbox是一种强大的CSS布局模式，可以很容易地实现垂直居中。通过将容器的display属性设置为flex，然后将align-items属性设置为center，就可以将内容垂直居中。 ``` .container { display: flex; align-items: center; justify-content: center; } ``` 2.使用position 在容器中使用绝对定位可以实现垂直居中。将子元素的position属性设置为absolute，并将top和bottom都设置为0，然后将margin属性设置为auto，这样就可以将内容垂直居中。 ``` .container { position: relative; } .child { position: absolute; top: 0; bottom: 0; margin: auto; } ``` 3.使用table-cell 将容器的display属性设置为table，子元素的display属性设置为table-cell，并将vertical-align属性设置为middle，就可以将内容垂直居中。 ``` .container { display: table; } .child { display: table-cell; vertical-align: middle; } ``` 4.使用transform 使用transform属性可以让内容在垂直方向上居中。将子元素的position属性设置为absolute，然后将top和left都设置为50%，再使用transform: translate(-50%, -50%)，就可以将内容垂直居中。 ``` .container { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 以上是一些常用的CSS垂直居中方法，可以根据具体需求选择合适的方法。 ### 回答3： 在网页设计中，垂直居中元素是一个非常常见的需求，而CSS也提供了多种方法实现垂直居中。下面我们来介绍一些常用的垂直居中方法。 1. 使用Flexbox布局 Flexbox是CSS3中引入的一种灵活的基于容器和项目的布局方式。我们可以通过设置容器的display属性为flex，再设置justify-content和align-items属性来实现元素的水平和垂直居中。 例如，将含有一个子元素的容器水平和垂直居中，可以将CSS代码写成这样： ``` .container { display: flex; justify-content: center; align-items: center; } .container > div { width: 200px; height: 100px; background-color: #f00; } ``` 2. 使用绝对定位和负边距 我们可以将要居中的元素使用绝对定位，然后设置top、bottom、left、right属性为0，同时使用margin:auto来实现水平居中。 例如： ``` .parent { position: relative; } .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 200px; height: 100px; background-color: #f00; } ``` 但这种方法需要在父元素中声明定位属性为relative或absolute。 3. 使用transform 我们可以使用CSS3的transform属性，将要垂直居中的元素的translateY属性设置为-50%。 例如： ``` .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translateY(-50%); width: 200px; height: 100px; background-color: #f00; } ``` 这种方法同样需要在父元素中声明定位属性为relative或absolute。 4. 使用flex布局和auto margin Flexbox布局中使用auto margin来实现水平和垂直居中。 例如： ``` .parent { display: flex; } .child { margin: auto; width: 200px; height: 100px; background-color: #f00; } ``` 这种方法非常简单，但需要注意父元素需要设置为flex布局。 总的来说，以上这些方法都可以实现垂直居中，可以根据具体情况选择适合自己的方式。同时，我们也可以根据需求结合使用不同的方法实现垂直居中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值