一： 水平居中
1. margin: 0 auto (设置当前元素)
<body>
<!-- 水平居中方法 1 -->
<div class="center">
<p>水平居中</p>
</div>
</body>
.center p {
width: 200px;
margin: 0 auto;
background-color: #555;
}
2. 父元素设置: text-align: center
1. 只能对图片, 按钮, 文字等 行内元素 (display为inline 或 inline-block等) 进行水平居中 。
2. 在 IE6、7 这两个奇葩的浏览器中, 它是能对任何元素进行水平居中的 。
<body>
<!-- 水平居中方法 2 -->
<div class="center2">
<button>按钮</button>
</div>
</body>
.center2 {
text-align: center;
}
3. 浮动《 结合 position:relative 》实现水平居中
<body>
<!-- 水平居中方法 3 -->
<div class="pagination">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
</body>
.pagination {
float: left;
width: 100%;
overflow: hidden;
position: relative;
background-color: bisque;
}
.pagination ul {
clear: left;
float: left;
position: relative;
left: 50%;
text-align: center;
background-color: #666;
}
.pagination li {
line-height: 25px;
margin: 0 5px;
display: block;
float: left;
position: relative;
right: 50%;
}
.pagination a {
display: block;
color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;
border: 1px solid #333;
border-radius: 2px;
}
.pagination a:hover {
text-decoration: none;
box-shadow: 0 1px 0 #f9bd71 inset, 0 1px 0 #0a0a0a;
background: linear-gradient(top, #f48b03, #c87100);
}
4. position:absolute 绝对定位实现水平居中
1. 适用于父元素和子元素的宽度都确定的情况 。
2. 父元素 position: relative; 子元素给剩余宽度一半的 margin-left 。
<body>
<!-- 水平居中方法 4 -->
<div class="out">
<p class="in">水平居中方法 4</p>
</div>
</body>
.out {
background-color: #c87100;
width: 100%;
position: relative;
height: 300px;
}
.in {
position: absolute;
left: 50%;
width: 300px;
margin-left: -150px;
background-color: blueviolet;
}
5. display:flex 弹性布局实现居中
6. 通过 transform 实现 CSS 水平居中
二： 垂直居中
1. 在父元素中设置 display: table-cell 属性 <此元素会作为一个表格单元格显示>, 结合 vertical-align: middle;
<body>
<div class="box box1">
<span>垂直居中</span>
</div>
</body>
.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: red;
height: 300px;
width: 800px;
}
2. 父元素使用弹性布局 display : flex; align-items:center;
<body>
<div class="box1 box2">
<span>垂直居中</span>
</div>
</body>
.box2{
display: flex;
justify-content:center;
align-items:Center;
height: 300px;
width: 800px;
background-color: red;
}
3. 父元素设置 display: flex 和 子元素设置 margin: auto
<body>
<div class="box1 box2 box3 box4 box6 box7 box8">
<div>垂直居中</div>
</div>
</body>
.box8{
display: flex;
text-align: center;
height: 300px;
width: 100%;
background-color: red;
}
.box8 div{
margin: auto;
width: 100px;
height: 100px;
background-color: brown;
}
4. 父元素相对定位 position:relative, 子元素绝对定位 position: absolute 和 负 margin
<body>
<div class="box1 box2 box3">
<span>垂直居中</span>
</div>
</body>
.box3{
position:relative;
height: 300px;
width: 800px;
background-color: red;
}
.box3 span{
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
text-align: center;
}
5. 父元素设置 position: relative 相对定位; 子元素设置 position: absolute; transform:translate(-50%,-50%);
<body>
<div class="box1 box2 box3 box4 box6">
<span>垂直居中</span>
</div>
</body>
.box6 {
height: 300px;
width: 100%;
background-color: red;
position: relative;
}
.box6 span{
position: absolute;
top:50%;
left:50%;
width: 200px;
transform:translate(-50%,-50%);
text-align: center;
background-color: cadetblue;
}
6. 父元素 position: relative 相对定位, 子元素 position: absolute 绝对定位和 0《做遮罩可以使用》
<body>
<div class="box1 box2 box3 box4">
<span>垂直居中</span>
</div>
</body>
.box4 {
height: 300px;
width: 100%;
background-color: red;
position: relative;
}
.box4 span{
width: 200px;
height: 200px;
background-color: cadetblue;
overflow: auto;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
7. 父元素 display:inline-block 和 :after 来占位
<body>
<div class="box1 box2 box3 box4 box6 box7">
<div>垂直居中</div>
</div>
</body>
.box7{
text-align:center;
font-size:0;
height: 300px;
width: 100%;
background-color: red;
}
.box7 div{
vertical-align:middle;
display:inline-block;
font-size:16px;
width: 100px;
height: 100px;
background-color: brown
}
.box7:after{
content:'';
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
