css居中方法
一、行内元素
text-align + line-height
-
设置行内元素(包括文本,图片等)水平居中可以通过设置父元素的text-align属性
-
垂直居中可以通过设置父元素行高的方式。将其父元素的line-height设成和高度一样的数值,被包裹的行内元素或者已经设置为inline-block的块级元素就会垂直居中。
.text{
width: 200px;
height: 200px;
background-color: aqua;
text-align: center;
line-height: 200px
}
<div class="text">
<span>
垂直水平居中
</span>
</div>
注:只适用于单行的行内元素
二、块级元素
1、父元素设置 padding值 + 子元素margin :auto
.warp{
width: 200px;
height: 200px;
background-color: aqua;
box-sizing:border-box;
padding-top: 75px;
}
.center{
background-color: red;
width: 50px;
height: 50px;
margin: auto;
}
<div class="warp">
<div class="center">
</div>
</div>
添加box-sizing:border-box属性后padding和border的值就不会在影响元素的宽高,相当于把padding和border的值都算在content里,不然元素的实际宽高 = padding值 + border值 + 元素宽高
2、position + transform
父元素设置绝对定位,子元素设置相对定位,然后再给子元素设置一个translate值即可实现水平垂直居中
.warp{
width: 200px;
height: 200px;
background-color: aqua;
position: relative;
}
.center{
background-color: red;
width: 50px;
height: 50px;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
</style>
<body>
<div class="warp">
<div class="center">
</div>
</div>
需要子元素设置translate是因为position定位是以左上角为基准的,而不是元素中心点,设置translate让子元素移动自身大小的一半才能实现水平垂直居中
3、table布局
display:table-cell
属性的作用是让标签元素以表格单元格的形式呈现,类似于td标签,vertical:middle
设置元素垂直居中,text-align:center
设置水平居中
.wrap{
width: 200px;
height: 200px;
background: aqua;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.center{
display: inline-block; // 如果是内联元素则不需要设置
width: 50px;
height: 50px;
background: red;
}
<div class="wrap">
<div class="center">
</div>
</div>
很明显可以看出来通过table布局的局限就是只适用于行内元素或者行内块级元素
4、flex布局
flexbox有两条轴线,一条主轴一条侧轴。设置父元素为flex容器,然后设置主轴和交叉轴的对齐方式即可
.wrap{
width: 200px;
height: 200px;
background: aqua;
display: flex;
align-items: center;
justify-content: center;
}
.center{
display: inline-block;
width: 50px;
height: 50px;
background: red;
}
<div class="wrap">
<div class="center">
</div>
</div>
如果是行内元素可以通过display:inline-flex
将其设置为flex容器
5、grid布局
CSS 网格布局将一个页面划分为几个主要区域,同时定义这些区域的大小、位置、层次等关系,在grid容器里面的水平区域称为行(row),垂直区域称为列(column),行与列的交叉称为单元格。
设置父元素为grid容器,然后设置单元格内容的水平垂直位置即可实现水平垂直居中(因为没有设置行和列所以整个wrap元素为一个单元格)
.wrap{
width: 200px;
height: 200px;
background: aqua;
display: grid; // 设置grid容器
justify-items:center;
align-items: center ;
}
.center{
display: inline-block;
width: 50px;
height: 50px;
background: red;
}
<div class="wrap">
<div class="center">
</div>
</div>
如果是行内元素可以通过display:inline-grid
将其设置为grid容器