css 垂直居中、水平居中

2024-10-07 15:59:19

在父元素、子元素未知的情况下居中有两种方法：

　　第一种方法：

　　　　.partent{

　　　　　　display:flex;

　　　　　　justify-content:center;

　　　　　　align-items:center;

　　　　}

　　第二种方法：

　　　　.partent{

　　　　　　display:flex;

　　　　}

　　　　.partent .child{

　　　　　　margin: auto;

　　　　}

父元素高度已知，子元素高度未知的情况下：

　　　　　.partent{

　　　　　　　height: 300px;

　　　　}

　　　　.partent .child{

　　　　　　　line-height: 300px;

　　　　　　　text-algin: center; //水平居中在子元素为块级元素时生效

　　　　}

父元素高度未知，子元素高度、宽度已知的情况下：

　　　　　.partent{

　　　　　　　position: relative;

　　　　}

　　　　.partent .child{

　　　　　　width: 100px;

　　　　　　height: 100px;

　　　　　　position: absolute;

　　　　　　top: 50%;

　　　　　　margin-top: -50px;

　　　　　　left: 50%;

　　　　　　margin-left: -50px;

　　　　}

注： margin的百分比是基于父元素的宽度的百分比的外边距。

最新文章

热门文章