CSS水平居中6种方法 与 CSS水平垂直居中7中方式
一： 水平居中
1. margin: 0 auto (设置当前元素)
水平居中
.center p {
width: 200px;
margin: 0 auto;
background-color: #555;
}
2. 父元素设置: text-align: center
1. 只能对图片, 按钮, 文字等 行内元素 (display为inline 或 inline-block等) 进行水平居中 。
2. 在 IE6、7 这两个奇葩的浏览器中, 它是能对任何元素进行水平居中的 。
.center2 {
text-align: center;
}
3. 浮动《 结合 position:relative 》实现水平居中
.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 。
水平居中方法 4
.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;
垂直居中
.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: red;
height: 300px;
width: 800px;
}
2. 父元素使用弹性布局 display : flex; align-items:center;
垂直居中
.box2{
display: flex;
justify-content:center;
align-items:Center;
height: 300px;
width: 800px;
background-color: red;
}
3. 父元素设置 display: flex 和 子元素设置 margin: auto
.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
垂直居中
.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%);
垂直居中
.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《做遮罩可以使用》
垂直居中
.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 来占位
.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;
}
CSS
相关推荐
两年经验面试阿里前端开发岗，已拿offer，这些知识点该放出来了
阅读 5309
vue: 防止按钮重复点击
阅读 966
【前端100问】Q74：使用 JavaScript Proxy 实现简单的数据绑定
阅读 76
Promise从入门到拿Offer之手写Promise
阅读 1938
前端面试：看了很多的前端面试真题，现在你知道怎么准备面试了吗？
阅读 2009