css中的居中问题

行内内容的居中
如何让一个容器的行内内容(文本和行内元素–inline/inlineblock)居中(当然inline-block比较特殊,即有行内属性,又有块级属性)。有以下方法:

  1. text-align:center水平居中。在块级父级元素上设置text-align:center,其内部的inline或inline-block的子元素以及文本内容会在父元素内居中。
  2. line-height垂直居中。line-height设置了行间的距离(行高),将要居中的元素的line-heigth值设置为和其块级父元素的height值一样时,其内部内容会垂直居中。
    注意:
    line-height不能使用负值。
    在块级元素使用line-height是定义该元素基线之间的最小距离而不是最大距离。
  3. vertical-align:middle垂直居中。
    行内元素inline/linline-block/inline-table内部内容的居中,使用伪元素。
    父级{
    display:inline-block;
    vertical-align: middle;
    }
    父级::before//或者::after
    { content: '';
    display: inline-block;
    height: 100%;
    display:inline-block;
    vertical-align: middle;
    }

    注意:设置为middle也不一定是真正的对齐,某些字体的中线位置不一定顶部和底部的正中间。

提一下:
inline水平的元素margin/padding设置仅在左右方向上有效。

<style>
*{
    margin:0;
    padding:0;
}
p{
    width:100px;
    height:100px;
    background: yellow;
}
span{
    margin:30px 30px;
}
style>
<body>
    <p class='one'>p>
    <span>sdfasdspan>
body>

css中的居中问题_第1张图片


块级元素居中
block、list-item、inline-block等元素如何在其父元素中居中。

  1. margin/padding值设置居中。

  2. clac计算数值。margin值为=父容器宽/高的50%-自身宽/高的50%:
    居中元素{
    width: 20rem;
    height: 20rem;
    margin-left:calc(50% - 10rem);
    margin-top:calc(50% - 10rem); }

  3. margin:0 auto左右居中。要居中的块级元素(block)元素设置margin:0 auto 。想知道margin:auto不能垂直居中的原因就怼这里
    注意:对浮动元素(float)、绝对定位(absolute)和固定定位(fixed)的元素无效 。

  4. position:absolute居中。此方法不推荐使用,故不详细解释,想了解的自行查找吧!

  5. 偏移量50%+负margin值。设置50%的水平和垂直偏移,然后设置的margin-top和margin-left值是要居中元素自身宽/高的一半的负数 。
    父级{ position: relative;}
    居中元素{
    position: absolute;
    height: 100px;
    width:100px;
    top: 50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;}

  6. 偏移量50%+负50%translate值。
    父级{ position: relative;}
    居中元素 {
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);}

  7. flex弹性布局居中。父元素设置为弹性盒子(容器),子元素就成为了弹性元素,利用flex相关属性进行居中。
    父级{
    display:flex; /*使用flex盒子*/
    justify-content:center;/*水平轴上居中*/
    align-items:center;/*垂直轴上居中*/}

    父元素设置为弹性容器display:flex,子元素设置magrin:auto :
    .父级{
    display:flex;
    }
    .居中元素{
    margin: auto;
    }

    注意:

    • 如果有多个弹性子元素,默认情况下弹性子元素会成一横排分布在父元素容器中。
    • flex默认将子元素水平排列到一行(flex-direction:row),使用flex-direction:column可以使子元素垂直排成一列。
    • flex默认子元素不折行显示(flex-wrap: nowrap ),使用flex-wrap: wrap可使子元素自动折行显示(当一行宽/高度不足容下多个子元素时折行为多行/列)。

你可能感兴趣的:(css)