垂直水平居中的代碼
阿新 • • 發佈：2017-06-24
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>
垂直水平居中的代碼