[提高总结三]css的居中对齐

快来打我* 2022-09-27 06:47 198阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>右侧导航菜单练习</title>
        <link rel="stylesheet" href="css/main.css">
        <script src="js/main.js"></script>
    
    </head>
    <body>
    <button>按钮</button>
    <div class="testCenter">
      <div class="testCenter2">
          <div class="testCenter3">
              <div class="testCenter4">
              </div>
          </div>
    
      </div>
    
    </div>
    </body>
    </html>

/*
    1: block = inline-block + width:100%
    2: inline-block = inline + 换行
    3: inline情况下，height和width都不起作用
    4: padding的垂直效果 = display不能为inline
    */
    
    .testCenter {
        position: absolute;
        width: 500px;
        height: 500px;
        background-color: red;
        border: solid 1px yellow;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    
    /*推荐用法*/
    .testCenter2 {
        position: absolute;
        width: 400px;
        height: 400px;
        background-color: green;
        left: 50%;
        top: 50%;
        margin: -200px 0 0 -200px;
    }
    
    .testCenter3 {
        position: absolute;
        width: 300px;
        height: 300px;
        background-color: royalblue;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        /*设置这三个属性，子元素就能居中了，ie11以下不支持*/
        justify-content: center;
        align-items: center;
        display: flex;
    }
    
    .testCenter4 {
        width: 200px;
        height: 200px;
        background-color: yellow;
    }

下一篇要看阮老师的flex布局，弹性布局。

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

发表评论取消回复

表情：

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

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

相关阅读

相关文本居中对齐(CSS、HTML)

文本居中对齐(CSS、HTML) <!DOCTYPE html> <html lang="en"> <head> <meta ch

秒速五厘米/ 2023年10月03日 12:33/ 0 赞/ 50 阅读

相关 css字体居中(css字体居中对齐)

css如何让表格居中层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的

妖狐艹你老母/ 2023年09月26日 13:09/ 0 赞/ 185 阅读

相关 css 居中对齐在实现方式

左右居中 .hAlign { left: 50%; transform: translate(-50%, 0%); } 垂直

雨点打透心脏的1/2处/ 2023年02月08日 15:56/ 0 赞/ 14 阅读

相关 css3内容垂直居中对齐

第一步：首先需要给盒子添加高度和宽度属性（勿忘）第二步：然后用flex布局： Justify-content:center; align-item

阳光穿透心脏的1/2处/ 2022年10月05日 04:46/ 0 赞/ 428 阅读

相关 [提高总结三]css的居中对齐

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

快来打我*/ 2022年09月27日 06:47/ 0 赞/ 199 阅读

相关 CSS制作水平垂直居中对齐

CSS制作水平垂直居中对齐 http://www.w3cplus.com/css/vertically-center-content-with-css

怼烎@/ 2022年09月25日 10:21/ 0 赞/ 324 阅读

相关 CSS居中对齐

前端开发whqet,csdn,王海庆,whqet,前端开发专家一、文本居中利用下面的html代码演示文本居中，也可以到这里[在线研究][Link 1]。

红太狼/ 2022年08月26日 08:10/ 0 赞/ 306 阅读

相关垂直居中对齐CSS代码

垂直居中对齐的核心代码如下： .elment{ position:relative; top:50%; transfo

约定不等于承诺〃/ 2022年08月24日 14:14/ 0 赞/ 294 阅读

相关 css中水平垂直居中对齐布局一些实例总结

水平居中，如果知道元素的宽度，则可以使用 <table style="color:rgb(68,68,68); font-family:STHeiti; font-size:

冷不防/ 2022年08月01日 23:34/ 0 赞/ 302 阅读

相关 css居中总结

css居中总结在页面的设计中，经常会需要将某个元素或者模块居中，下面就总结一下这种常见的布局方式。(由于都是居中，就不放图了) 1. 水平居中 1. 使用te

朱雀/ 2022年06月10日 08:57/ 0 赞/ 266 阅读