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>

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。