div { width: 200px; margin: 0 auto; }
.container { background: rgba(0, 0, 0, 0.5); text-align: center; font-size: 0; } .box { display: inline-block; width: 500px; height: 400px; background-color: pink; }
div { position: absolute; width: 300px; height: 300px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; background-color: pink; /*方便看效果*/ }
/*确定容器的宽高宽500高300的层设置层的外边距div{*/ position: absolute;/*绝对定位*/ width: 500px; height: 300px; top: 50%; left: 50%; margin: -150px 0 0 -250px;/*外边距为自身宽高的一半*/ background-color: pink;/*方便看效果*/ }
/*未知容器的宽高,利用`transform`属性*/ div { position: absolute; /*相对定位或绝对定位均可*/ width: 500px; height: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: pink; /*方便看效果*/ }
/*利用flex布局实际使用时应考虑兼容性*/ .container { display: flex; align-items: center; /*垂直居中*/ justify-content: center; /*水平居中*/ } .containerdiv { width: 100px; height: 100px; background-color: pink; /*方便看效果*/ }
/*利用text-align:center和vertical-align:middle属性*/ .container { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); text-align: center; font-size: 0; white-space: nowrap; overflow: auto; } .container::after { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .box { display: inline-block; width: 500px; height: 400px; background-color: pink; white-space: normal; vertical-align: middle; }
回答:
一般常见的几种居中的方法有: 对于宽高固定的元素 (1)我们可以利用margin:0 auto来实现元素的水平居中。 (2)利用绝对定位,设置四个方向的值都为0,并将margin设置为auto,由于宽高固定,因此对应方向实现平分,可以实现水 平和垂直方向上的居中。 (3)利用绝对定位,先将元素的左上角通过top:50%和left:50%定位到页面的中心,然后再通过margin负值来调整元素 的中心点到页面的中心。 (4)利用绝对定位,先将元素的左上角通过top:50%和left:50%定位到页面的中心,然后再通过translate来调整元素 的中心点到页面的中心。 (5)使用flex布局,通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对 齐,然后它的子元素也可以实现垂直和水平的居中。 对于宽高不定的元素,上面的后面两种方法,可以实现元素的垂直和水平的居中。
本文作者:前端小毛
本文链接:
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!