欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

CSS--居中方式总结

程序员文章站 2022-04-14 13:00:16
一、水平居中方法 1.行内元素、字体的水平居中 1.对于行内元素（display值为inline或inline block都可以）或者字体：父元素添加css规则：text align：center; 2.块元素的水平居中 1.使用margin实现水平居中 将margin left 和 margin ......

一、水平居中方法

1.行内元素、字体的水平居中

1.对于行内元素（display值为inline或inline-block都可以）或者字体：父元素添加css规则：text-align：center;

<style>
p{
    /*关键*/
    text-align:center;
}

ul{
    /*关键*/    
    text-align:center:
}
/*这里li设置inline-block*/
.item{
    /*关键*/
    display:inline-block;
}

</style>
<!--字体-->
<p>I am ry</p>

<!--行内元素-->
<ul>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
</ul>

2.块元素的水平居中

1.使用margin实现水平居中

将margin-left 和 margin-right 设置为auto，块元素将会自动匹配适应，实现水平居中

<style>
*{
    margin:0;
    padding:0;
}
.box1{
    height:300px;
    background:blue;
}
.item1{
    /*关键，margin-left，margin-right设置为auto*/
    margin: 0 auto;
    width: 100px;
    height: 100px;
    background:red;
}
</style>
<body>
   <div class="box1">
       <div class="item1"></div>
   </div>
</body>

2.使用position+margin-left实现水平居中

定位后，设置left先整体偏移父容器的一半，再使用负margin-left自己一半的宽度，从而子元素中心对准父元素中心。

<style>
.box2{
    position:relative;
    height:300px;
    background:blue;
}
.item2{
    /*关键 相对定位*/
    position: relative;
    /*关键*/
    left: 50%;
    /*关键*/
    margin-left:-50px;
    width:100px;
    height:100px;
    background:red;
}
</style>
<body>
  <div class="box2">
       <div class="item2"></div>
   </div>
</body>

3.如果是多个块元素在同一水平线居中排列，则将其display设置成inline-block，还有一种是使用flexbox的布局方式来实现。

块元素设置了inline-block后，拥有行内元素并排特点，只要父元素设置text-align即可使其水平居中。

<style>
.box3{
    /* 关键，对于行内元素水平居中 */
    text-align: center;
}

.item3{
    /* 关键，将块元素设置成行内块接元素 */
    display:inline-block;
    width:100px;
    height: 100px;
    background:red;
}
</style>
<body>
<div class="box3">
       <div class="item3"></div>
       <div class="item3"></div>
       <div class="item3"></div>
       <div class="item3"></div>
   </div>
</body>

二、垂直居中

1.行内元素或者文字（单行情况）

1.可以直接使用line-height属性来设置: 将line-height设置成和height一样即可

<style>
    .text{
        height:100px;
        line-height:100px;
        border:1px solid red;
    }
</style>

<body>
    <div class="text">
        we dont talk anymore
    </div>
</body>

2.使用padding（top,bottom）通过增加内边距来实现垂直的居中

<style>
.ctext{
        /*关键*/
        padding-top:30px;
        padding-bottom:30px;
        border:1px solid red;
    }
</style>
<body>
 <div class="ctext">确认过眼神，我遇上对的人</div>
</body>

2.行内元素或者文字（多行情况）

1.照样可以使用padding（top 和 bottom）

2.对父元素设置display:table-cell 和 vertical-align:middle

<style>
    .box{
        /* 将其变成单元格的形式 */
        display: table-cell;
        /* width:100px; */
        height:300px;
        border:1px solid red;
        /* 设置内联元素的垂直对齐的方式 */
        vertical-align: middle;
    }

</style>
<body>
    <div class="box">
        <span>how to love</span><br>
        <span>I knoe I need somebody</span><br>
        <span>I know I need somebody</span><br>
        <span>pary for me</span>
    </div>
</body>

3.块元素垂直居中

1.确定宽高的情况

使用position 和 margin-top配合

<style>
    *{
        margin:0;
        padding:0;
    }
    /* 父元素 */
    .parent{
        position:relative;
        height:400px;
        border: 1px solid blue;
    }
    /* 子元素 */
    .child{
        /* position  */
        position: relative;
        /* 距离顶部50% */
        top:50%;
        /* 再用margin-top     向上调子容器一半高度，则刚好子元素中心对准父元素中心 */
        margin-top:-100px;
        height:200px;
        border:1px solid red;
    }
</style>
<body>
    <div class="parent">
        parent
        <div class="child">
            child
        </div>
    </div>
</body>

2.对于未知宽高的

使用transform 的 translateY(-50%) 向上平移自身一半

<style>
    .parent2{
        position: relative;
        background:blue;
        height:400px;
    }
    .child2{
        position: relative;
        top:50%;
        transform: translateY(-50%);
        background: red;
    }
</style>
<div class="parent2">
        parent2
    <div class="child2">child2</div>
</div>

3.使用flex布局

<style>
  .parent3{
        /*关键flex*/
        display:flex;
        display: -webkit-flex;
        /* 对齐排列居中 */
        justify-content:center;
        /* 排列方向垂直 */
        flex-direction:column;
        height:400px;
        background:yellow;
    }
    .child3{
        height:100px;
       }
</style>
<body>
 <!-- flexbox -->
    <div class="parent3">
        <div class="child3"></div>
    </div>
</body>

三、水平且垂直居中

1.position 和 margin 配合

<style>
    *{
        margin: 0 ;
        padding: 0 ;
    }
    .box1{
        position:relative;
        height:400px;
        background:blue;
    }
    .item1{
        /*关键*/
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top:-50px;
        margin-left:-50px;
        width:100px;
        height:100px;
        background: red;
    }
</style>
<body>
    <div class="box1">
        <div class="item1"></div>
    </div>
</body>

2.使用flex布局

同时设置两条居中属性 justify-content 和 align-items

<style>
   .box2{
        display: flex;
        /*关键*/
        justify-content: center;
        /*关键*/
        align-items: center;
        height:300px;
        background:yellow;
    }
    .item2{
        width:50px;
        height:50px;
        background:red;
    }
</style>
<body>
    <div class="box1">
        <div class="item1"></div>
    </div>

    <div class="box2">
        <div class="item2"></div>
    </div>
</body>

本篇是个人笔记，可经常看看。向前走，也别忘记要多回顾

确认过眼神，我遇上对的人

Ry（元）

上一篇： hadoop学习之hdfs文件系统

下一篇： Vue集成Iframe页面的方法示例

推荐阅读