- * {
- margin: 0;
- padding: 0;
- }
- .box1 {
- float: left;
- position: relative;
- width: 200px;
- height: 200px;
- border: 1px solid red;
- }
- .son1 {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- .box2 {
- /* float: left; */
- display: table-cell;
- text-align: center;
- vertical-align: middle;
- width: 200px;
- height: 200px;
- border: 1px solid red;
- }
- .son2 {
- display: inline-block;
- }
- .box3 {
- position: relative;
- width: 200px;
- height: 200px;
- border: 1px solid red;
- margin-top: -1px;
- }
- .son3 {
- width: 30px;
- height: 30px;
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- margin: auto;
- }
上面是 CSS 代码, 放在哪里就不用多说了, 接着是 html
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>
- 实现盒子居中的三种方式
- </title>
- </head>
- <body>
- <div class="box1">
- <div class="son1">
- 盒子 1
- </div>
- </div>
- <div class="box2">
- <div class="son2">
- 盒子 2
- </div>
- </div>
- <div class="box3">
- <div class="son3">
- 盒子 3
- </div>
- </div>
- </body>
- </HTML>
附上结果图
说一下原理: 第一种是利用定位和 c3 中的属性 transform 移动自身的 - 50%, 来实现居中效果, 不用考虑自身宽高;
第二种是把父级盒子转换成 table-cell 模式. 也就是单元格模式, 然后水平居中, 垂直居中 (就是图片居中的 vertical-align: middle), 子盒子设置成行内块模式, 前提是父子级盒子都必须指明宽高;
第三种方式, 是利用的子绝父相定位, 子盒子定位使用 margin:auto; 自动适应, 然后 top,left,right,bottom 都设置为零 (方法有点偏门);
另外, 还有一些方式, 提及一下;
1> . 移动端 flex 布局中有设置 Y 轴为主轴的方式, 还有就是垂直和水平居中, 同样能让盒子水平垂直居中.
2> . JS 中同样有些方法能在不知道父盒子和子盒子的宽高的情况下, 返回拥有实际宽高度的盒子的宽和高, 然后子绝父相, 通过 JS 做简单的运算, 移动到某个位置, 同样能实现水平居中和垂直居中的效果, 但是方法很奇葩, 了解就行...
来源: http://www.bubuko.com/infodetail-3358116.html