美文网首页
水平居中和垂直居中

水平居中和垂直居中

作者: smartlala | 来源:发表于2017-10-15 16:01 被阅读0次

  本文列举了水平和垂直居中的方法,分别在已知宽高和未知宽高的情况。

从以下方法不难看出,要制造居中,大体分为位移居中和直接设置居中。

html

<div class="farther">

<div class="son"></div>

</div>

4个方法

已知宽高:

1.定位+margin

.father {

      width: 500px;

      height: 500px;

      background: #ccc;

      position: relative;

    }

    .son {

      width: 200px;

      height: 200px;

      background: orange;

      position: absolute;

      top: 50%;

      left: 50%;

      margin-left: -100px;

      margin-top: -100px;

    }

2..定位+calc

.father {

      width: 500px;

      height: 500px;

      background: #ccc;

      position: relative;

    }

.son {

      width: 200px;

      height: 200px;

      background: orange;

      position: absolute;

      top:( 50%-100px);

      left: calc(50%-100px);   

    }

3.定位+制造位移

.father {

      width: 500px;

      height: 500px;

      background: #ccc;

      position: relative;

    }

.son {

      width: 200px;

      height: 200px;

      background: orange;

      position: absolute;

    transform: translate(-50%,-50%)

    }

*****忘了******

4.diplay:flex

.father {

      width: 500px;

      height: 500px;

      background: #ccc;

display:flex;

justify-content: center;

align-items: center;

    }

.son {

      width: 200px;

      height: 200px;

      background: orange;

    }

相关文章

  • css水平居中和水平垂直居中

    水平居中和水平垂直居中demo

  • 常用的居中方法

    本文将介绍的居中方法有 ,水平居中,垂直居中和水平垂直居中。 一水平居中 二水平垂直居中

  • css 居中

    居中有水平居中和垂直居中。 水平居中+垂直居中 flex法 position法 就是计算呗~ 参考 CSS各种居中...

  • 居中对齐

    行内元素居中[#hang]垂直居中[#hc]水平居中[#hs] 块级元素居中[#kuai]垂直居中[#kc]水平居...

  • 水平居中与垂直居中

    水平居中和垂直居中可以说是在开发中经常遇到的问题,网上搜索水平居中和垂直居中的方法有很多,有的方法并不是很好,所以...

  • 实现元素水平居中的五种方法

    概述 我们平时看到的居中效果主要分为三大类,水平居中,垂直居中和水平垂直居中,在这里总结以下元素水平居中的方法。 ...

  • 水平居中和垂直居中

    水平居中设置--行内元素 水平居中设置--定宽块级元素 水平居中设置--不定宽块状元素 垂直居中--父元素高度确定...

  • 水平居中和垂直居中

    #水平居中 1.1.已知宽度块元素宽度 : 1.2.文本内容居中: 1.3.通过表格: 1.4.已知宽度,通过设置...

  • 水平居中和垂直居中

    假设有如下html结构 一、实现item在header内水平居中1、item定宽度 2、item不定宽度ps: m...

  • 水平居中和垂直居中

    水平居中 1、行内元素 父元素: 此方法父元素有没有宽度都ok 2、块级元素 需要居中的元素设置宽度 设置css ...

网友评论

      本文标题:水平居中和垂直居中

      本文链接:https://www.haomeiwen.com/subject/eljcuxtx.html