水平垂直居中(整理9种方法)

注: 如想看效果 直接复制如下css,并给父元素和子元素两个不同背景色即可

// 父元素：限宽高 ， 子元素：不限宽高
(1) (2) (3) (4) (5)
// 父元素和子元素 都限宽高
(6) (7) (8) (9)

(1)

// 父元素:

width: 500px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;

(2)

// 父元素:

width: 500px;
height: 500px;
display: grid;

// 子元素:

align-self: center;
justify-self: center;

(3)

// 父元素:

width: 500px;
height: 500px;
display : flex;

// 子元素:

margin : auto

(4)

// 父元素:

width: 500px;
height: 500px;
position: relative;

// 子元素:

top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);

(5)

// 父元素:

width: 500px;
height: 500px;
display: table-cell;
text-align: center;
vertical-align: middle;

// 子元素:

display: inline-block;

(6)

// 父元素:

width: 500px;
height: 500px;
overflow: hidden;

// 子元素:

width: 100px;
height: 100px;
margin: 50% auto;
transform: translateY(-50%); 

(7)

// 父元素:

width: 500px;
height: 500px;
position: relative;

// 子元素:(margin-left,margin-top值都是通过子元素的宽高计算得来的)

width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;

(8)

// 父元素:

width: 500px;
height: 500px;
position: relative;

// 子元素:

width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;

(9)

// 父元素:

width: 500px;
height: 500px;
position: relative;

// 子元素:(top left 都是根据子元素的宽高计算得来的)

width: 100px;
height: 100px;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);

文章在此就结束啦! 如果你有什么更好的建议,请留言告知,相互学习才能更快进步!