1. 程式人生 > >垂直水平居中的代碼

垂直水平居中的代碼

clas left run middle line exc blue tab class

(1):text-align + line-height實現單行文本水平垂直居中

<style>
.test{
    text-align: center;
    line-height: 100px;
}
</style>

<body>
<div class="test" style="width: 200px;">測試文字</div>
</body>

(2): text-align + vertical-align
<style>
.parent{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child{
    display: inline-block;
}
</style>

<body>
<div class="parent" style=" width:200px; height:100px;">
  <div class="child" style="">測試文字</div>
</div> 
</body>

(3):margin:0 auto;

<body>
<div class="wrap">
    <div class="child auto">
        non-child
    </div>
</div>
</body>
<style>
.child{
            width: 100px;
            height: 100px;
            background: green;
            box-sizing: border-box;
        }
        .auto{
            margin:0 auto;
        }
   .wrap{
          width: 300px;
          height: 200px;
          border: 2px solid #ccc;
          box-sizing: border-box;
      }
</style>

(4):margin-left或margin-right

<style>

.child{
            width: 100px;
            height: 100px;
            background: green;
            box-sizing: border-box;
        }
 .margin{
            margin-left:100px;
        }
 .wrap{
          width: 300px;
          height: 200px;
          border: 2px solid #ccc;
          box-sizing: border-box;
      }
</style>
<body>
<div class="wrap">
    <div class="child margin">
        non-child
    </div>
</div>
</body>

(5):transform
<style>
#container{
position: relative;
height: 200px;
background: #333;
}
#center-div{
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div id="container">
<div id="center-div"> xxx </div>
</div>
</body>

(6):margin-top或margin-bottom
<style>
 .wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
            box-sizing: border-box;
        }
.div1{
            width:100px ;
            height: 100px;
            box-sizing: border-box;
            background: darkblue;
        }
        .margin{
          margin-top: 100px;
        }
</style>

<body>
<div class="wrap ">
    <div class="div1 margin">111111</div>
</div>
</body>

(7):padding-top或padding-bottom
<style>
.wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
            box-sizing: border-box;
        }
 .padding{
            padding-top: 100px;
        }
.div1{
            width:100px ;
            height: 100px;
            box-sizing: border-box;
            background: darkblue;
        }
</style>
<body>
<div class="wrap  padding">
    <div class="div1 ">111111</div>
</div>
</body>

(8):vertical-align:middle
<style>
.parent{
    text-align: center;
    line-height: 100px;
    font-size: 0;
}
.child{
    vertical-align: middle;
}
</style>

<body>
<div class="parent" style=" width:200px; ">
  <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</div>  
</body>





垂直水平居中的代碼