如何垂直居中一个浮动元素

怼烎@ 2022-12-15 03:53 184阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        /* 已知宽高进行居中 */
        #known {
          position: relative;
          height: 500px;
          background: palegreen;
        }
    
        #known p {
          width: 200px;
          height: 200px;
          background: orange;
          position: absolute;
          top: 50%;
          left: 50%;
          /* 二分之一的宽高 */
          margin-left: -100px;
          margin-top: -100px;
        }
    
    
        /*  未知宽高进行居中  */
        #unknown {
          position: relative;
          height: 500px;
          background: orchid;
        }
    
        #unknown p {
          width: 200px;
          height: 200px;
          background: orangered;
          position: absolute;
          margin: auto;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
        }
    
        /* 图片的居中 */
        #images {
          line-height: 800px;
          text-align: center;
        }
    
        img {
          vertical-align: middle;
        }
      </style>
    </head>
    
    <body>
      
      
    
      
      
    
      
      <div id="images">
        <img src="../img/8.jpg" alt="">
      </div>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关居中一个元素(水平+垂直居中)

我们的示例代码全在此基础上修改： ...... <style> { margin: 0;

末蓝、/ 2023年10月15日 10:44/ 0 赞/ 53 阅读

相关如何居中一个元素

本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

怼烎@/ 2023年03月06日 05:18/ 0 赞/ 1 阅读

相关如何垂直居中一个浮动元素

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

怼烎@/ 2022年12月15日 03:53/ 0 赞/ 185 阅读

相关 js设置元素垂直居中

/ 设置垂直居中 / function fVericalAlignBody(){ var nBodyHeight = 730;

末蓝、/ 2022年08月18日 11:51/ 0 赞/ 214 阅读

相关垂直居中一个元素

.div里的内容会垂直居中 css部分： .div \{ -webkit-align-items: center;

末蓝、/ 2022年08月09日 06:54/ 0 赞/ 212 阅读

相关浮动元素居中显示

方法一： html代码如下： <span style="font-size:12px;"><span style="white-space:pre"> <

淡淡的烟草味﹌/ 2022年08月07日 07:48/ 0 赞/ 218 阅读

相关如何居中一个元素

转自：[如何居中一个元素][Link 1] 题目点评这道题目的提问比较多，连续问了三个问题，正常元素、绝对定位元素、互动元素如何居中，而且居中没有说清楚是垂直居中

蔚落/ 2022年05月28日 01:43/ 0 赞/ 199 阅读

相关元素垂直水平居中布局

`水平居中` 水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的

快来打我*/ 2022年01月26日 23:11/ 0 赞/ 337 阅读

相关如何让一个元素水平垂直居中？

这问题大概分为两种类型，看要求，元素有没有被设置宽高一、元素被设置了宽高（默认为350px\300px） 1.利用绝对定位 box{ positi

拼搏现实的明天。/ 2021年10月01日 04:46/ 0 赞/ 423 阅读

相关 css 浮动元素居中

方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

偏执的太偏执、/ 2021年09月20日 10:48/ 0 赞/ 396 阅读