css 内部组件水平居中,css实现盒子内部 div水平垂直居中

总结一下利用css实现盒子内部 div居中的几种方法

1.水平居中

1)margin： 0 auto

.box {

width: 300px;

height: 300px;

border: 2px solid black;

}

.box1 {

width: 100px;

height: 100px;

background: red;

margin:0 auto;

}

1-1

2.水平垂直居中

1)定位和需要定位的元素的margin减去宽高的一半

局限性：需要知道需要垂直居中的宽高才能实现

.box {

width: 300px;

height: 300px;

border: 2px solid black;

position:relative;

}

.box1 {

width: 100px;

height: 100px;

background: red;

position:absolute;

top:50%;

left:50%;

margin-top: -50px;

margin-left: -50px;

}

2-1

2)position定位和margin:auto;

不受宽高限制

.box {

width: 300px;

height: 300px;

border: 2px solid black;

position:relative;

}

.box1 {

width: 100px;

height: 100px;

background: red;

position:absolute;

left:0;

top:0;

right:0;

bottom:0;

margin:auto;

}

2-2

3)定位和transfrom

.box {

width: 300px;

height: 300px;

border: 2px solid black;

position:relative;

}

.box1 {

width: 100px;

height: 100px;

background: red;

position:absolute;

left:50%;

top:50%;

transform: translate(-50%,-50%);

}

2-3

4)flex居中

.box {

width: 300px;

height: 300px;

border: 2px solid black;

display:flex;

justify-content: center;

align-items: center;

}

.box1 {

width: 100px;

height: 100px;

background: red;

}

2-4

5)diplay：table-cell

.box {

width: 300px;

height: 300px;

border: 2px solid black;

display:table-cell;

vertical-align: middle;

text-align: center;

}

.box1 {

width: 100px;

height: 100px;

background: red;

display:inline-block;

}

2-5