居中_居中对齐 - CSDN
精华内容
参与话题
  • CSS实现居中的7种方法

    万次阅读 2014-11-28 15:56:15
    实现HTML元素的居中 看似简单,实则不然 ...水平居中比如容易,垂直居中比较难搞定,水平垂直都居中更不容易。在这个响应式布局的年代,很难固定元素的宽高,俺统计了一下,目前至少有六种方法。本文由浅入深逐个介绍

    实现HTML元素的居中 看似简单,实则不然

    水平居中比如容易,垂直居中比较难搞定,水平垂直都居中更不容易。在这个响应式布局的年代,很难固定元素的宽高,俺统计了一下,目前的几种方法。本文由浅入深逐个介绍,使用了同一段HTML代码:

    <div class="center">
    <img src="jimmy-choo-shoe.jpg" alt="">
    </div>

    下面鞋子图片会变化但原始大小始终是500px × 500px,主题背景颜色使用了HSL colors 

    1.水平居中—使用 text-align 

    Photograph of a classic Chuck Converse shoe

    有些场景下 简单的方法就是最好的方法

    div.center { text-align: center; background: hsl(0, 100%, 97%); }
    div.center img { width: 33%; height: auto; }

    但该方法不能让图片垂直居中:需要给 div 添加 padding 或 给 div 中的元素添加 margin-top 和 margin-bottom 

    2. margin: auto 居中

    Photograph of a white classic Nike sneaker

    同样也是水平居中,局限性跟第1种方法一样:

    div.center { background: hsl(60, 100%, 97%); }
    div.center img { display: block; width: 33%; height: auto; margin: 0 auto; }

    注意 display: block, 这种情况下必须有 margin: 0 auto.

    3. table-cell 居中

    Photograph of black Oxford calfskin shoe designed by Vivienne Westwood

    使用 display: table-cell,  可以实现水平垂直都居中。通常需要添加一个额外的空元素。

    <div class="center-aligned">
    <div class="center-core">
    <img src="jimmy-choo-shoe.jpg">
    </div>
    </div>

    CSS 代码:

    .center-aligned { display: table; background: hsl(120, 100%, 97%);width: 100%; }
    .center-core { display: table-cell; text-align: center; vertical-align:middle; }
    .center-core img { width: 33%; height: auto; }

    注意 width: 100% 是为了防止 div 折叠,外面的容器需要一个高度才能垂直居中。 如果垂直居中的元素是放在 .  body 中的话,需要给 html 和 body 设置 height. 在所有浏览器中均有效,包括 IE8+.

    4. Absolute 居中

    Photograph of an Under Armour Micro G Toxic Six shoe

    最近  Stephen Shaw 推广的一项新技术可以很好地兼容各种浏览器。唯一的缺点是外部容器必须声明height 

    .absolute-aligned {
    position: relative; min-height: 500px;
    background: hsl(200, 100%, 97%);
    }
    .absolute-aligned img {
    width: 50%;
    min-width: 200px;
    height: auto;
    overflow: auto; margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    }

    Stephen 在 他的文章 中验证了这段代码的许多版本

    5. 使用 translate 居中

    Photograph of a Jimmy Choo shoe

     Chris Coiyer 提出了一个新的方法:使用 CSS transforms. 同时支持水平居中和垂直居中:

    .center { background: hsl(180, 100%, 97%); position: relative; min-height: 500px; }
    .center img { position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%); width: 30%; height: auto; }

    有以下缺点:

    • CSS transform 需要针对不同的浏览器使用 特定的前缀  (-moz  或  -o  或  -webkit
    • 在低版本的IE (IE8 及以下 )中无效
    • 外部容器需要设置高度 height (or gain it in some other way)  因为它不能从它的absolutely-positioned 内容上获得高度.
    • 如果内容包含 text, 当前浏览器合成技术对文本解释得很模糊.

    6. 使用 Flexbox 居中

    Photograph of a Manolo Blahnik shoe

    一旦属性变量和特定前缀消失的话,这种方法很可能成为首选的居中方案.

    .center { background: hsl(240, 100%, 97%); display: flex; justify-content: center; align-items: center; }
    .center img { width: 30%; height: auto; }

    在许多方面 flexbox 是最简单的解决方案,但制约因素是 各种陈旧语法和低版本的IE, (尽管 display: table-cell是一个可以接受的方案). 完整的 CSS代码:

    .center { background: hsl(240, 100%, 97%);
    display: -webkit-box; /* OLD: Safari, iOS 6 and earlier; Android browser, older WebKit */
    display: -moz-box; /* OLD: Firefox (can be buggy) */
    display: -ms-flexbox; /* OLD: IE 10 */
    display: -webkit-flex; /* FINAL, PREFIXED, Chrome 21+ */
    display: flex; /* FINAL: Opera 12.1+, Firefox 22+ */
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    }

    现在规范已经形成,浏览器也支持, I have written extensively on flexbox layout and its uses.

    7. 使用 calc 居中

    Photograph of a Christian Louboutin shoe

    在某些场景下比 flexbox 更通用:

    .center { background: hsl(300, 100%, 97%); min-height: 600px; position:relative; }
    .center img { width: 40%; height: auto; position: absolute; top:calc(50% - 20%); left: calc(50% - 20%); }

    显而易见, calc 允许在当前的页面布局上进行计算。在上面的例子中,50% 是容器中元素的中间点,但是单独使用会使得image的左上角位于<div>中间。我们需要把width 和height 再往回拉一下,大小分别是图片width 和height 的一半。表达式如下:

    top: calc(50% - (40% / 2)); left: calc(50% - (40% / 2));

    在目前的浏览器中,你可以发现:当内容 fixed 且大小已知的时候,该技术效果最佳:

    .center img { width: 500px; height: 500px; position: absolute; top:calc(50% - (300px / 2)); left: calc(50% - (300px – 2)); }

     calc 这种方法跟 flexbox 一样也有很多潜在的缺点: 支持Firefox 4 及更高版本浏览器,对于更早版本的浏览器,需要添加前缀,不支持IE8。图片居中的完整代码:

    .center img { width: 40%; height: auto; position: absolute;
    top: -webkit-calc(50% - 20%); left: -webkit-calc(50% - 20%);
    top: -moz-calc(50% - 20%); left: -moz-calc(50% - 20%);
    top: calc(50% - 20%); left: calc(50% - 20%); }

    当然还有很多其他的方法,例如 使用伪元素来垂直居中 , 理解这些技术可以让web开发人员在处理居中问题的时候不麻爪!

    原文在这里

    展开全文
  • HTML之三种居中

    2020-07-29 14:18:24
    HTML之三种居中,1.表格布局页面居中,2.div布局页面居中,3.框架布局页面居中
  • 针对学员疑问“div垂直居中?”引出的“CSS元素垂直居中一系列方法的探究”的针对性课程,课程包含两方面:1、文本垂直居中的解决方案;2、块级元素垂直居中的解决方案。
  • CSS水平居中+垂直居中+水平/垂直居中的方法总结

    万次阅读 多人点赞 2018-09-02 19:48:43
    水平居中  行内元素  块级元素 方案一:(分宽度定不定两种情况) 方案二:使用定位属性 方案三:使用flexbox布局实现(宽度定不定都可以) 垂直居中 单行的行内元素 多行的行内元素  块级元素 水平垂直...

     

    目录

    水平居中 

    行内元素

     块级元素

    方案一:(分宽度定不定两种情况)

    方案二:使用定位属性

    方案三:使用flexbox布局实现(宽度定不定都可以)

    垂直居中

    单行的行内元素

    多行的行内元素

     块级元素

    水平垂直居中

    已知高度和宽度的元素

    未知高度和宽度的元素

    方案一:使用定位属性

    方案二:使用flex布局实现


    水平居中 

    • 行内元素

    首先看它的父元素是不是块级元素,如果是,则直接给父元素设置 text-align: center; 

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            text-align: center;
           }
    </style>
    
    <div id="father">
        <span id="son">我是行内元素</span>
    </div>

    如果不是,则先将其父元素设置为块级元素,再给父元素设置 text-align: center;

    <style>
        #father {
            display: block;
            width: 500px;
            height: 300px;
            background-color: skyblue;
            text-align: center;
           }
    </style>
    
    <span id="father">
        <span id="son">我是行内元素</span>
    </span>

    效果:


    •  块级元素

    方案一:(分宽度定不定两种情况)

    定宽度:需要谁居中,给其设置 margin: 0 auto; (作用:使盒子自己居中)

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
        }
    
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
            margin: 0 auto;
        }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果:

     不定宽度:默认子元素的宽度和父元素一样,这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素,给父元素设置 text-align: center; 

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            text-align: center;
        }
    
        #son {
            background-color: green;
            display: inline;
        }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果:(将#son转换成行内元素,内容的高度撑起了#son的高度,设置高度无用)


    方案二:使用定位属性

    首先设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的left:50%,即让子元素的左上角水平居中;

    定宽度:设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
    
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 50%;
            margin-left: -50px;
    }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    不定宽度:利用css3新增属性transform: translateX(-50%);

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
    
        #son {
            height: 100px;
            background-color: green;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
    }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果:


    方案三:使用flexbox布局实现(宽度定不定都可以)

    使用flexbox布局,只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: flex;
            justify-content: center;
        }
    
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果: 


    垂直居中

    • 单行的行内元素

    只需要设置单行行内元素的"行高等于盒子的高"即可;

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
        }
    
        #son {
            background-color: green;
            height: 300px;
        }
    </style>
    
    <div id="father">
        <span id="son">我是单行的行内元素</span>
    </div>

    效果:

     


    • 多行的行内元素

    使用给父元素设置display:table-cell;vertical-align: middle;属即可;

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: table-cell;
            vertical-align:middle;
        }
    
        #son {
            background-color: green;
        }
    </style>
    
    <div id="father">
        <span id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span>
    </div>

    效果:


    •  块级元素

    方案一:使用定位

    首先设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的top: 50%,即让子元素的左上角垂直居中;

    定高度:设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
    
        #son {
            height: 100px;
            background-color: green;
            position: absolute;
            top: 50%;
            margin-top: -50px;
    }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    不定高度:利用css3新增属性transform: translateY(-50%);

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
    
        #son {
            width: 100px;
            background-color: green;
            position: absolute;
            left: 50%;
            transform: translateY(-50%);
    }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果:


    方案二:使用flexbox布局实现(高度定不定都可以)

    使用flexbox布局,只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: flex;
            align-items: center;
        }
    
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果: 


    水平垂直居中

    • 已知高度和宽度的元素

    方案一:设置父元素为相对定位,给子元素设置绝对定位,top: 0; right: 0; bottom: 0; left: 0; margin: auto;

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
    
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
    }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果:


    方案二:设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
    
        #son {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
    }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果:


    • 未知高度和宽度的元素

    方案一:使用定位属性

    设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            position: relative;
    }
    
        #son {
            background-color: green;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
    }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果:


    方案二:使用flex布局实现

    设置父元素为flex定位,justify-content: center; align-items: center;

    <style>
        #father {
            width: 500px;
            height: 300px;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
    }
    
        #son {
            background-color: green;
    }
    </style>
    
    <div id="father">
        <div id="son">我是块级元素</div>
    </div>

    效果:

    展开全文
  • 【让div在屏幕中居中(水平居中+垂直居中)的几种方法】 水平居中方法: 1.inline,inline-block元素的水平居中,在父级块级元素中设置text-align:center; 2.确定宽度的块级元素水平居中方法 margin:0 auto...

    这里是修真院前端小课堂,本篇分析的主题是

    【让div在屏幕中居中(水平居中+垂直居中)的几种方法】

    水平居中方法:

    1.inline,inline-block元素的水平居中,在父级块级元素中设置text-align:center;

    2.确定宽度的块级元素水平居中方法

    margin:0 auto;

     

    绝对定位和margin-left:-(width/2)实现水平居中:

    绝对定位+margin:0 auto + left:0 right:0 bottom:0 top:0

    3.位置宽度的块级元素居中方法:

    display:inline-block 设置text-align:center;

    flex布局实现居中

     

    垂直居中实现方法:

    1.固定高度实现垂直居中

    height+line-height

    绝对定位+margin-top赋值

    2.高度自适应实现垂直居中:

    flex布局:

     

    “我们相信人人都可以成为一个工程师,现在开始,找个师兄,带你入门,学习的路上不再迷茫。

    技能树.IT修真院

    ------------------------------------------------------------------------------------------------------------
    今天的分享就到这里啦,欢迎大家点赞、转发、留言、拍砖~

    展开全文
  • CSS中居中

    2019-03-22 14:11:37
    参考文章: https://juejin.im/post/5a7a9a545188257a892998ef https://www.w3cplus.com/css/centering-css-complete-guide.html ...utm_medium=email&a...

    参考文章:
    https://juejin.im/post/5a7a9a545188257a892998ef
    https://www.w3cplus.com/css/centering-css-complete-guide.html
    https://segmentfault.com/a/1190000013966650?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly#articleHeader15
    https://www.w3cplus.com/css/float-center.html
    https://juejin.im/post/5c8f9e595188252db756920c
    https://zhuanlan.zhihu.com/p/25068655
    https://github.com/yanhaijing/vertical-center
    https://juejin.im/entry/583b954b61ff4b006b55b43d

    在这里插入图片描述

    1.水平居中

    01 行内元素 text-align:center

    .parent {
       text-align: center;
    }
    span{
            border: 1px solid blue;
          }
    
    <div class="parent">
        <span class="child">child</span>
    </div>
    

    02 块级元素 margin:auto

    .child1{
      text-align: center;
      width: 100px;
      border: 1px solid blue;
      margin: auto;
    }
    
    <div class="parent1">
        <div class="child1">child</div>
    </div>
    

    在这里插入图片描述

    03 多个块级元素

    如果要让多个块级元素在同一水平线上居中,那么可以修改它们的 display 值。这里有两个示例,其中一个使用了 inline-block 的显示方式,另一个使用了 flexbox 的显示方式:

    body {
      background: #f06d06;
      font-size: 80%;
    }
    
    main {
      background: white;
      margin: 20px 0;
      padding: 10px;
    }
    
    main div {
      background: black;
      color: white;
      padding: 15px;
      max-width: 125px;
      margin: 5px;
    }
    
    .inline-block-center {
      text-align: center;
    }
    
    .inline-block-center div {
      display: inline-block;
      text-align: left;
    }
    
    .flex-center {
      display: flex;
      justify-content: center;
    }
    
    <main class="inline-block-center">
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
      </div>
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
      </div>
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
      </div>
    </main>
    
    <main class="flex-center">
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
      </div>
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
      </div>
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
      </div>
    </main>
    

    在这里插入图片描述

    总结:水平居中分三种情况,行内、块级、多个块级,分别解决方法是text-align:centermargin:autodisplay`:inline-block或者flex布局 display:flex;justify-content: center;

    2.垂直居中

    参考文章:
    https://juejin.im/entry/583b954b61ff4b006b55b43d
    https://www.w3cplus.com/css/centering-css-complete-guide.html

    第一种情况:单行+行内/具有行内元素性质的元素

    01 行内元素(单行文字垂直居中):设置line-height=height

    .parent {
       height: 200px;
       line-height: 200px;
       border: 1px solid red;
    }
    

    01 行内元素(单行文字垂直居中):设置padding让上下内边距相等

    body{
      background: #f06d06;
    }
    
    main {
      background: white;
      margin: 20px 0;
      padding: 50px;
    }
    
    main a{
      background: black;
      color: white;
      padding: 40px 30px;
      text-decoration: none;
    }
    
    <main>
        <a href="#0">We're</a>
        <a href="#0">Centered</a>
        <a href="#0">Bits of</a>
        <a href="#0">Text</a>
      </main>
    

    第二种情况:多行+行内/具有行内元素性质的元素

    02 利用table/table-cell布局

    首先要知道table中td默认情况下vertical-align: middle;,所以我们可以利用table/table-cell布局,实现多行垂直居中。

    text-align是设置或检索对象中文本的左中右对齐方式。
    vertical-align是用于指定元素的上下垂直对齐方式。

    text-align和vertical-align更多可以参考:
    https://www.jianshu.com/p/ba232268f573
    https://www.cnblogs.com/keyi/p/5924563.html
    https://blog.csdn.net/zhuobin_tian/article/details/70169664
    https://blog.csdn.net/diudiu5201/article/details/54666809

    *{
      margin: 0px;
      padding: 0px
    }
    
    body {
      background: #f06d06;
      font-size: 80%;
    }
    
    table {
      background: white;
      width: 240px;
      border-collapse: separate;
      margin: 20px;
      height: 250px;
    }
    
    table td {
      background: black;
      color: white;
      padding: 20px;
      border: 10px solid white;
      /* default is vertical-align: middle; */
    }
    
    .center-table {
      display: table;
      height: 250px;
      background: white;
      width: 240px;
      margin: 20px;
    }
    .center-table p {
      display: table-cell;
      margin: 0;
      background: black;
      color: white;
      padding: 20px;
      border: 10px solid white;
      vertical-align: middle;
    }
    
    <table>
      <tr>
        <td>
          I'm vertically centered multiple lines of text in a real table cell.
        </td>
        <td>
          I'm vertically centered multiple lines of text in a real table cell.
        </td>
      </tr>
    </table>
    
    <div class="center-table">
      <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
    </div>
    

    在这里插入图片描述

    02 利用flex布局

    如果没法用类table方式,可能你需要用 flexbox:

    .flex-center{
      display: flex;
      border: 1px solid #0000FF;
      height: 200px;
      width: 1600px;
      justify-content:center;
      align-items:center;
    }
    
    <div class="flex-center">
      <p>I'm vertically centered multiple lines of text in a flexbox container.</p>
    </div>
    

    在这里插入图片描述

    请记住这个方法仅仅适用于父容器具有一个固定的额高度(px,%,等等),这也是为什么容器有一个高度。

    02 幽灵元素(ghost element)/虚元素

    利用“精灵元素”(ghost element)技术实现垂直居中,即在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的。

    如果上述方法都不起作用,那么你就需要使用被称为幽灵元素(ghost element)的非常规解决方式:在垂直居中的元素上添加伪元素,设置伪元素的高等于父级容器的高,然后为文本添加 vertical-align: middle; 样式,即可实现垂直居中。


    附注:

    resize和overflow一起使用可以设置调整div元素的大小:

    div
    {
    resize:both;
    overflow:auto;
    }
    

    在这里插入图片描述
    还可以参考:https://www.cnblogs.com/cpt666/p/6718643.html


    body {
      background: #f06d06;
      font-size: 80%;
    }
    
    div {
      background: white;
      width: 240px;
      height: 200px;
      margin: 20px;
      color: white;
      resize: vertical;
      overflow: auto;
      padding: 20px;
    }
    
    .ghost-center {
      position: relative;
    }
    .ghost-center::before {
      content: " ";
      display: inline-block;
      height: 100%;
      width: 1%;
      vertical-align: middle;
    }
    .ghost-center p {
      display: inline-block;
      vertical-align: middle;
      width: 190px;
      margin: 0;
      padding: 20px;
      background: black;
    }
    
    <div class="ghost-center">
      <p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
    </div>
    

    第三种情况:块级元素

    03 知道元素的高度:绝对定位

    我们知道居中元素的高度和宽度,垂直居中问题就很简单。通过绝对定位元素距离顶部50%,并设置margin-top向上偏移元素高度的一半,就可以实现垂直居中了。

    .parent {
        position: relative;
        height: 200px;
    }
    .child {
        width: 80px;
        height: 40px;
        background: blue;
        position: absolute; //
        left: 50%; //
        top: 50%; //
        margin-top: -20px; //
        margin-left: -40px; //
    }
    
    body {
      background: #f06d06;
      font-size: 80%;
    }
    
    main {
      background: white;
      height: 300px;
      margin: 20px;
      width: 300px;
      position: relative;
      resize: vertical;
      overflow: auto;
    }
    
    main div {
      position: absolute;
      top: 50%;      
      height: 100px;
      margin-top: -50px;
      background: black;
      color: white;
    }
    
    <main>
    
      <div>
         I'm a block-level element with a fixed height, centered vertically within my parent.
      </div>
    
    </main>
    

    在这里插入图片描述

    03 块级元素 元素高度未知:绝对定位+transform

    优点:不需要提前知道尺寸
    缺点:兼容性不好

    .parent {
        position: relative;
        height: 200px;
    }
    .child {
        width: 80px;
        height: 40px;
        position: absolute; //
        left: 50%; //
        top: 50%; //
        transform: translate(-50%, -50%); //
        background: blue;
    }
    

    03 块级元素:绝对定位 + margin: auto

    优点:不需要提前知道尺寸,兼容性好
    缺点:这个方法是我最喜欢用的一个,要说缺点的话,我目前还不知道。

    参考文章:https://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-绝对定位-水平垂直居中/

    .parent {
        position: relative;
        height: 200px;
        background: red;
    }
    .child {
        width: 80px;
        height: 40px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: blue;
    }
    

    在这里插入图片描述

    03 块级元素:padding

    缺点:如果高度固定,需要提前计算尺寸(只在某些特定情况适用)。

    .parent {
        padding: 5% 0;
    }
    .child {
        padding: 10% 0;
        background: blue;
    }
    

    03 块级元素:display: flex

    缺点:兼容性不好

    .parent {
        width: 600px;
        height: 200px;
        border: 1px solid red;
        display: flex;
        align-items: center;
        justify-content: center;  /*水平居中*/
    }
    .child {
        background: blue;
    }
    

    03 块级元素:calc()

    也是个不错的方法。
    缺点:兼容性较差,需要计算。

    .parent {
        width: 300px;
        height: 300px;
        border: 1px solid red;
        position: relative;
    }
    .child {
        width: 100px;
        height: 100px;
        background: blue;
        padding: -webkit-calc((100% - 100px) / 2);
        padding: -moz-calc((100% - 100px) / 2);
        padding: -ms-calc((100% - 100px) / 2);
        padding: calc((100% - 100px) / 2);
        background-clip: content-box;
    }
    

    03 块级元素:inline-block

    .parent {
        width: 400px;
        height: 400px;
        border: 1px solid red;
        position: relative;
    }
    .child, .brother {
        display: inline-block;
        vertical-align: middle;
    }
    .child {
        background: blue;
        font-size: 12px;
    }
    .brother {
        height: 400px;
        font-size: 0;
    }
    
    <div class="parent">
        <div class="child">child</div>
        <div class="brother">brother</div>
    </div>
    

    其他 当然,还有一种方法,就是使用table布局:

    展开全文
  • 居中详解

    2019-08-07 17:44:08
    说到布局除了浮动以及定位外还有一个不得不提的点,那就是居中居中问题我们在网页布局当中经常遇到,那么以下就是分为两部分来讲,一部分是传统的居中,另一种则是flex居中,每个部分又通过分为水平垂直居中来讲。...
  • 居中方法总结

    2019-03-22 09:40:28
    居中分为水平居中和垂直居中 1、水平居中 1)行内元素居中 行内元素居中是只针对行内元素的,比如文本(text)、图片(img)、按钮等行内元素,可通过给父元素设置 text-align:center 来实现。另外,如果块状元素...
  • 六种居中的方法

    2018-10-17 12:22:21
    方案一: ...div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】, 兼容性:,IE7及之前版本不支持  div{ width: 200px; height: 200px; background: green; position:absolute; ...
  • 居中

    2016-11-03 20:04:02
    链接:...水平居中方案:水平居中设置1、行内元素设置 text-align:center2、定宽块状元素设置 左右 margin 值为 auto3、不定宽块状元素a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、
  • css居中问题

    千次阅读 2018-08-27 09:13:10
    居中布局 一、水平居中(子元素) 【1】.常规元素设置水平居中: 《1》行内元素、不定宽块级元素:设置父元素 text-align:center 《2》图片水平居中:设置img clear+display+margin 《3》定宽块级元素:...
  • h5学习笔记:居中

    千次阅读 2018-06-10 16:57:28
    将之前的用到的记录一下。以便不时之需。朋友一直和我讲css 是不简单,到目前为此,css发展已经进化到越来越惊人。其实学好css 不容易,也没有人所...text-align 可以实现居中效果。 &amp;amp;amp;lt;!DOCTYPE...
  • web中的各种居中

    千次阅读 2019-04-20 21:50:18
    居中是前端开发过程中最常见的布局,但是很多人都不清不楚,每次就靠试一试,今天就拎一拎~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学习居中</title&...
  • 最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单。 水平居中直接加上&amp;lt;center&amp;gt;标签即可,或者设置margin:auto;当然也可以用下面的方法下面说两种在屏幕正中...
  • 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS: .Absolute-Center { margin: auto; position: absolute; top: 0; left...
  • Word 2016 撰写论文(1): 公式居中、编号右对齐

    万次阅读 多人点赞 2020-06-27 15:40:58
    写论文时,要求公式居中,编号右对齐。刚开始碰到这种问题,很麻烦,网上看了好多方法,目前,两种方法比较实用。第一种是表格法,方便快捷;第二种是制表位法,刚开始设置比较繁琐,一旦设置好了,比表格法速度还要...
  • 网上有很多关于Flex的教程,对于Flex的叫法也...元素居中,相信作为前端工程师的你肯定会经常用到,不管是在水平方向居中,还是垂直方向居中,都可在你的职业生涯中徘徊。不过很多时候要实现垂直居中,还是比较麻烦的。
  • CSS 元素垂直居中的 6种方法

    万次阅读 多人点赞 2018-01-17 20:40:13
    转自:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84-6%E7%A7%8D%E6%96%B9%E6%B3%95/利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的...
  • 实现div里的img图片水平垂直居中

    万次阅读 多人点赞 2020-01-16 10:40:37
    body结构<body> <div> <...将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。<style type="text/css"> *{
  • html中table居中和表格内容居中的问题

    万次阅读 多人点赞 2019-12-03 16:54:40
    在表格td中,有两个属性控制居中显示 align——表示左右居中——left,center,right valign——控制上下居中——left,center,right 这两个属性综合使用,就可以让单元格的内容上下左右都居中显示。 ...
1 2 3 4 5 ... 20
收藏数 268,947
精华内容 107,578
关键字:

居中