css-水平和垂直布局

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/github_34514750/article/details/51044595
1.元素的水平居中?垂直居中?水平垂直居中?

水平居中

1.如果需要居中的是常规流中inline元素—图片,按钮,文字等行内元素(display为inline或inline-block等)

则在 父元素 中使用text-align: center;

<div class="content">
    <span>a aa a</span>
</div>

<style>
   .content{
        width: 500px;
        border: 1px solid black;
        text-align: center;
   }
</style>

2.如果需要居中的是常规流中block元素—是常规流,对浮动元素或绝对定位元素无效。
或者是多个元素的水平排列,可以用flex或者是inline-bolck和text-align:center;

已经知道宽度:用margin
不知道宽度:1.display:inline-block,父元素text-align 2.flex布局

则需要为

1.元素设置宽度,
2.设置左右margin为auto,
3.IE6下需在父元素上设置text-align: center;再给子元素恢复需要的值

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        text-align: center; /* 3 */
    }
    .content {
        width: 500px;      /* 1 */
        text-align: left;  /* 3 */
        margin: 0 auto;    /* 2 */

        background: purple;
    }
</style>

或者使用inline-block水平居中

仅inline-block属性是无法让元素水平居中,display:inline-block;
关键之处要在元素的父容器中设置text-align的属性为“center”,这样才能达到效果

或者用flex布局

<div class="flex">
    <div class="child ">
        non-child
    </div>
</div>

.flex{
       width: 300px;
       height: 200px;
       border: 2px solid #ccc;
       box-sizing: border-box;
       display:flex;
       flex-direction: row;
       justify-content:center;

   }
 .child{
       width: 100px;
       height: 100px;
       background: green;
       box-sizing: border-box;
   }

3.如果需要居中的元素为浮动元素

则需要为:

1.为元素设置宽度

2.position: relative

3.浮动方向偏移量(left或者right)设置为50%

4.浮动方向上的margin设置为元素宽度一半乘以-1

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
    }
    .content {
        width: 500px;         /* 1 */
        float: left;

        position: relative;   /* 2 */
        left: 50%;            /* 3 */
        margin-left: -250px;  /* 4 */

        background-color: purple;
    }
</style>

4.如果需要居中的元素为浮动元素,但不知道浮动元素的宽度,则需要多一个包裹要居中的元素。

则需要为:

1.把浮动元素相对定位到父元素宽度50%的地方,但这个时候元素还不是居中的,而是比居中的那个位置多出了自身一半的宽度

2.他里面的子元素再用一个相对定位,把那多出的自身一半的宽度拉回来,而因为相对定位正是相对于自身来定位的,所以自身一半的宽度只要把left 或 right 设为50%就可以得到了,因而不用知道自身的实际宽度是多少。

<head>
<style>
    body{
        margin:0;
        padding:0;
    }
    .parent{
        width:300px;
        height:200px;
        border:1px solid red;
    }
    /*浮动居中的方法需要有这么一个包裹的元素,需要浮动的就是这个元素*/
    .wraper{
        float:left;//在这个包裹元素上浮动,让它自适应的宽度
        position:relative;
        left:50%;//相对定位到父元素宽度一半的地方
        clear:both;
    }
    .child{
        border:1px solid blue;//这个是真正需要居中的元素
        position:relative;//在这个元素上进行相对定位
        left:-50%;//向左偏移本身的一半宽度,正好就居中了
        white-space:nowrap;
    }
</style>

</head>
<body>
    <div class="parent">
        <div class="wraper">
            <div class="child">我水平居中了</div>
        </div>
        <div class="wraper" style="margin-top:20px;">
            <div class="child">宽度不同</div>
        </div>
        <div class="wraper" style="margin-top:20px;">
            <div class="child">确实啊</div>
        </div>
    </div>
</body>

5.如果需要居中的元素为绝对定位元素

则需要:

1.为元素设置宽度

2.偏移量设置为50%

3.偏移方向外边距设置为元素宽度一半乘以-1

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;/* 1 */

        position: absolute;
        left: 50%;/* 2 */
        margin-left: -400px;/* 3 */

        background-color: purple;
    }
</style>

或者

需要(这种方法要记住,很好)

1.为元素设置宽度

2.设置左右偏移量都为0

3.设置左右外边距都为auto

<body>
    <div class="content">
    aaaaaa aaaaaa a a a a a a a a
    </div>
</body>

<style>
    body {
        background: #DDD;
        position: relative;
    }
    .content {
        width: 800px;/* 1 */

        position: absolute;
        margin: 0 auto;/* 3 */
        left: 0;/* 2 */
        right: 0;/* 2 */

        background-color: purple;
    }
</style>

垂直居中

1.行级元素–line-height

使用line-height让单行的文字垂直居中,line-height设置伪父容器的height,适用于只有一行文字的情况。

<div class="top">
    <span></span>
</div>

.top{
    width: 300px;
    height: 100px;
    text-align: center;//加上本行之后就是水平垂直居中了
    border: 1px solid black;
}
span{
    line-height: 100px;
}

2.块级元素(设置成line-height或者是table格式)

子元素上设置display:inline-block;然后就和行内元素一样了~

.top{
    width: 300px;
    height: 100px;
    text-align: center;//加上本行之后就是水平垂直居中了
    border: 1px solid black;
}
.bottom{
    line-height: 100px;
    display: inline-block;
}

<div class="top">
<div class="bottom">我是</div>
</div>

或者是用table和table-cell

<div id="parent">
<div id="child">Content here</div>
</div>

#parent {display: table;}
#child {
    display: table-cell;
    vertical-align: middle;
}

或者用flex布局

<div class="wrap flex">
    <div class="non-height ">1111</div>
</div>

.wrap{
       width:200px ;
       height: 300px;
       border: 2px solid #ccc;
       box-sizing: border-box;
   }
.non-height{
       background: green;
   }
.flex{
       display: flex;
       flex-direction: column;
       justify-content: center;
   }

3.绝对定位元素居中

<div id="parent">
<div id="child">Content here</div>
</div>

#parent {position: relative;}
#child {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

水平垂直居中

1.行级元素

父元素中设置text-align
行级元素设置vertical-align(或者行高设置和父元素一样)

2.块级元素

使用display:table-cell来居中或者margin:auto

对于那些不是表格的元素,我们可以通过display:table-cell 来把它模拟成一个表格单元格,这样就可以利用表格那很方便的居中特性了。例如:

<div style="display:table-cell;vertical-align:middle;text-align:center;width:200px;height:200px;border:1px solid black;">
    <div style="width:50px;height:50px;background:#03F;display:inline-block;"></div>
</div>

div{
width:100px;
height:100px;
margin:0 auto;
}

3.浮动元素水平垂直居中

div{
    float:left;
    width:500px;
    height:300px;
    position:relative;
    top:50%;
    left:50%;
    margin:-150px 0 0 -250px;
}

4.绝对元素水平垂直居中

让父元素relative结合margin和top,left布局–或者flex布局

<div class="container">
    <div class="box"></div>
</div>

方法一:让父元素relative结合margin和top,left布局

<style>
    .container{
        width: 600px;
        height: 400px;
        border: 1px solid #000;
        position: relative;
    }
    .box{
        width: 200px;
        height: 100px;
        border: 1px solid #000;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -100px;
        margin-top:-50px;
    }
</style>

方法二:flex布局

<style>
    .container{
        width: 600px;
        height: 400px;
        border: 1px solid #000;
        display: flex;
        justify-content:center;
        align-items:center;

    }
    .box{
        width: 200px;  //宽度可以为任意
        height: 100px; //高度可以为任意
        border: 1px solid #000;

    }
</style>
<div class="container">
    <div class="box"></div>
</div>

水平垂直居中已知宽高元素

1.父元素relative,子元素absolute

.parent-panel2{
    width:100%;
    height:400px;
    border:1px solid #888;
    position: relative;
}
.middle-panel2{
  position: absolute;
  width:300px;
  height: 100px;
  border:1px solid #888;
  top:50%;
  margin-top:-50px;
  left: 50%;
  margin-left: -150px;
}

2.绝对定位

.div2 {
  position: absolute;
  border: 1px solid #888;
  width: 100px;
  height: 100px;
  margin: auto;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

水平垂直居中未知宽高元素

1.flex布局

<style>
    .container{
        width: 600px;
        height: 400px;
        border: 1px solid #000;
        display: flex;
        justify-content:center;
        align-items:center;
    }
    .box{
        width: 200px;  //宽度可以为任意
        height: 100px; //高度可以为任意
        border: 1px solid #000;

    }
</style>
<div class="container">
    <div class="box"></div>
</div>

2.display:table-cell方法

#demo{
    display:table;
    width:500px;
    margin:10px auto;
    background:#eee;
}
#demo p{
    display:table-cell;
    height:100px;
    vertical-align:middle;
}

3.利用translate3d(-50%,-50%,0)实现垂直居中,只支持高版本

.parent{
    position:relative;
}
.div2 {
  position: absolute;
  border: 1px solid #888;
  left: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(-50%) 0;
}
阅读更多

没有更多推荐了,返回首页