标签：居中 元素 border 50% height width 方法 display 200px

<!-- （1）对于行内元素或具有inline-block属性的元素居中，比如span,img等可以使用text-align:center来实现 -->

.box1{
            width: 200px;
            border: 1px solid #000;
            text-align:center;
        }

.son1{
            width:100px;
            background-color:#ddd;
        }
<div class="box1">
        <span class="son1">我是span元素</span>
    </div>

 <!-- (2)使用margin:0 auto                 使用margin：auto的方式与第一种不同的是，这种css属性作用域元素本身，                 且必须给元素设定了宽度和具有display:block的块级元素     -->

.box2{
            width: 200px;
            border: 1px solid #000;
        }
        .son2{
            width: 150px;
            background-color:#ddd;
            display:block;
            margin:0 auto;
        }
<div class="box2">
        <span class="son2">我是span元素</span>
    </div>

<!-- (3)定位居中 ：这种方式的好处是行内元素和块级元素都适用，但是需要知道元素本身的宽度 -->

.box3{
            width: 200px;
            height:200px;
            border: 1px solid #000;
            position:relative;
        }
        .son3{
            width: 150px;
            height: 50px;
            background-color:#ddd;
            position:absolute;
            left:25px;
            top:75px;
        }
<div class="box3">
        <span class="son3">我是span元素</span>
    </div>

<!-- (4)margin:auto与定位组合使用:这种方式的好处是行内元素和块级元素都适用，但是需要知道元素本身的宽度 -->

.box4{
            width: 200px;
            height:200px;
            border: 1px solid #000;
            position:relative;
        }
        .son4{
            width: 150px;
            height: 50px;
            background-color:#ddd;
            position:absolute;
            margin:auto;
            left:0;
            right:0;
            top:0;
            bottom:0;
        }
 <div class="box4">
        <span class="son4">我是span元素</span>
    </div>

<!-- (5)负margin 和定位组合使用:这种方式的好处是行内元素和块级元素都适用，但是需要知道元素本身的宽度  -->

.box5{
            width: 200px;
            height:200px;
            border: 1px solid #000;
            position:relative;
        }

        .son5{
            width:150px;
            height:50px;
            background-color:#ddd;
            position:absolute;
            left:50%;
            top:50%;
            margin:-25px 0 0 -75px;
        }
<div class="box5">
        <span class="son5">我是span元素</span>
    </div>

      <!-- (7)translate 和定位组合使用： -->

.box7{
            width: 200px;
            height:200px;
            border: 1px solid #000;
            position:relative;
        }
        .son7{
            width: 150px;
            height: 50px;
            background-color:#ddd;
            position:absolute;
            left:50%;
            top:50%;
            -webkit-transform: translate(-50%,-50%);
               -moz-transform: translate(-50%,-50%);
                -ms-transform: translate(-50%,-50%);
                 -o-transform: translate(-50%,-50%);
                    transform: translate(-50%,-50%);
        }
<div class="box7">
        <span class="son7">我是span7元素</span>
    </div>

<!-- (8)使用flex居中：使用flex居中不需要知道元素本身的宽高及元素的属性 -->

 .box8{
            width: 200px;
            height:200px;
            border: 1px solid #000;
            display:-webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .box8>span{
            background-color:#ddd;
        }
<div class="box8">
        <span>我是span8元素</span>
    </div>

<!-- (9)使用table-cell居中：需要添加额外的元素作为外部容器 -->

.box9{
            width: 200px;
            height:200px;
            border: 1px solid #000;
            display:table;
        }
        .center-core{
            display:table-cell;
            text-align:center;
            vertical-align:middle;
        }
<div class="box9">
        <div class="center-core">
            <span>我是span9元素</span>
        </div>
    </div>

 

标签：居中,元素,border,50%,height,width,方法,display,200px
来源： https://www.cnblogs.com/zhuMother/p/12205452.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。