Rumah > Artikel > hujung hadapan web > css实现元素水平、垂直居中
在我们实际项目中,有很多关于垂直居中的方法,比如,在手机页面中有很多的弹框提示内容,简单整理如下,希望可以帮助到大家。
做了很多的页面,感觉垂直居中这个问题一直存在,感觉有的方法比较简单,有的却需要根据实际情况去算,我整理的是我在实际中使用过的方法,可能不是最全面的,但实操效果还是不错的哟。
废话少说直接上代码咯:
/* 常用的三种方法 */ /* 第一种 */ div{ width: 200px; height: 200px; margin: auto; background: pink; position: fixed; top: 0; left: 0; right: 0; bottom: 0; } /* 第二种 */ div{ width: 200px; height: 200px; background: green; position: fixed; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; } /* 第三种 */ div{ width: 200px; height: 200px; background: green; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
html部分直接去实现去套吧
相关推荐:
Atas ialah kandungan terperinci css实现元素水平、垂直居中. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!