1.水平居中text-align:center;
在没有浮动的情况下,我们可以让需要居中的块级元素设为inline/inline-block,然后在其父元素上添加text-aline:center;即可。如果想要居中的块级元素是内联元素(span,img,a等),直接在其父元素上添加text-align:center;即可。
.father{ width: 200px; height: 200px; background-color: aqua; text-align: center; } .son{ width: 100px; height: 100px; background-color: brown; display: inline-block; } <div class="father"> <div class="son"></div> </div>
2.使用margin:0 auto;水平居中
居中的元素必须是块级元素,如果是行内元素,需要添加display:block;而且元素不浮动。
.father{ width: 200px; height: 200px; background-color: aqua; } .son{ width: 100px; height: 100px; background-color: brown; margin: 0 auto; } <div class="father"> <div class="son"></div> </div>
3.定位实现水平垂直居中(需要计算偏移值)
必须要知道居中的元素的宽高
.father{ width: 200px; height: 200px; background-color: aqua; position: relative; } .son{ width: 100px; height: 100px; background-color: brown; position: absolute; left: 50%; top:50%; margin-left: -50px; margin-top:-50px; } <div class="father"> <div class="son"></div> </div>
4.定位实现居中(不需计算偏移值)
margin:auto;和四个方向定位搭配使用,不需要知道元素的宽高
.father{ width: 200px; height: 200px; background-color: aqua; position: relative; } .son{ width: 100px; height: 100px; background-color: brown; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } <div class="father"> <div class="son"></div> </div>
5.定位配合css3新属性transform:translate(x,y)使用
不需要知道元素的宽度和高度,在移动端用的比较多,因为移动端对css3新属性的兼容性比较好。
.father{ width: 200px; height: 200px; background-color: aqua; position: relative; } .son{ width: 100px; height: 100px; background-color: brown; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); } <div class="father"> <div class="son"></div> </div>
6.css3新属性calc()和定位配合使用(需要知道元素的宽高)
用于动态计算长度值。
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 "+", "-", "*", "/" 运算;
calc()函数使用标准的数学运算优先级规则;
.father{ width: 200px; height: 200px; background-color: aqua; position: relative; } .son{ width: 100px; height: 100px; background-color: brown; position: absolute; left: calc(50% - 50px); top: calc(50% - 50px); } <div class="father"> <div class="son"></div> </div>
7.使用flex弹性盒布局 实现水平垂直居中
不需要知道元素本身的宽高以及元素的属性
.father{ width: 200px; height: 200px; background-color: aqua; display: flex; justify-content:center; align-items:center; } .son{ width: 100px; height: 100px; background-color: brown; } <div class="father"> <div class="son"></div> </div>