一、水平居中
- 需要居中的元素为常规流的inline元素,则只需要设置父元素的text-align:center即可。
测试用例:
<style>
.main{
height:40px;
background-color: #000;
color:#fff;
text-align:center;
}
.test{
background-color: red;
}
</style>
<div class="main">
<span class="test">helloworld</span>
</div>
- 需要居中的元素是常规流中的block元素
测试用例:
<style>
.main{
height:100px;
background-color: #000;
}
.test{
width:200px;
height:100%;
margin:0 auto;
background-color: red;
}
</style>
<div class="main">
<div class="test"></div>
</div>
3. 需要居中的元素是浮动元素
测试用例:
<style>
.main{
height:100px;
background-color: #000;
}
.test{
width:200px;
height:100%;
float:left;
left:50%;
position:relative;
margin-left: -100px;
background-color: red;
}
</style>
<div class="main">
<div class="test"></div>
</div>
4.需要定位的元素为absolute元素
测试用例:
<style>
.main{
height:100px;
background-color: #000;
}
.test{
width:200px;
height:100px;
position: absolute;
left:50%;
margin-left: -100px;
background-color: red;
}
</style>
<body>
<div class="main">
<div class="test"></div>
</div>
</body>
<style>
.main{
height:100px;
background-color: #000;
}
.test{
width:200px;
height:100px;
position: absolute;
left:0;
right:0;
margin:0 auto;
background-color: red;
}
</style>
<body>
<div class="main">
<div class="test"></div>
</div>
</body>
二、垂直居中
1.需要居中的元素为单行文本,设置其文本包含元素的line-height大于font-size即可。这种原理是利用设置行高达到文本内容居中的效果。
测试 用例:
<style>
.test{
background-color: #000;
color:#fff;
text-align: center;
line-height:40px;
}
</style>
<body>
<p class='test'>THIS IS A TEXT</p>
</body>
2.实现水平垂直居中
a.使用margin:auto的形式
测试用例:
<style>
.container{
position: relative;
height:500px;
width:1000px;
background-color: #000;
}
.content{
height:50%;
width:50%;
margin: auto;
position: absolute;
top: 0;
right:0;
bottom:0;
left:0;
background-color: green;
}
</style>
<body>
<div class="container">
<div class="content">
</div>
</div>
</body>
b.使用负外边距的形式
<style>
.content{
position: absolute;
width:400px;
height:400px;
left:50%;
top:50%;
margin-left: -200px;
margin-top:-200px;
background-color: #000;
}
</style>
<body>
<div class="content"></div>
</body>
c.使用css中transform的形式
<style>
.content{
width: 50%;
height:50%;
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
background-color: #000;
}
</style>
<body>
<div class="content"></div>
</body>