##实现 已知宽高的的一个元素水平垂直居中的方法有
<style type="text/css">
/* 以下的所有方法适合已知宽高的时候用 */
body,p{margin: 0; padding: 0;}
/*1、 给子元素用margin+子元素要解决margin-top的兼容 */
/* div{width: 500px;height: 500px;background: #000;margin: 40px;overflow: hidden;}
p{width: 300px;height: 300px;background: firebrick;margin: 100px;} */
/* 2、给父元素添加padding 注意父元素得减法或者变成怪异盒子 */
/* div{width: 300px;height: 300px;background: #000;margin: 40px;padding: 100px;} */
/* div{width: 500px;height: 500px;background: #000;margin: 40px;padding: 100px;box-sizing: border-box;}
p{width: 300px;height: 300px;background: firebrick;} */
/* 3、用元素类型的知识点 vertical-align+text-align */
/* div{width: 500px;height: 500px;background: #000;margin: 40px;line-height: 500px;text-align: center;}
p{width: 300px;height: 300px;background: firebrick; vertical-align: middle;display: inline-block;line-height: 300px;} */
/* 4、用元素类型的知识点 vertical-align+text-align + span中介*/
/* div{width: 500px;height: 500px;background: #000;margin: 40px;text-align: center;}
p{width: 300px;height: 300px;background: firebrick;vertical-align: middle;display: inline-block;line-height: 300px;}
span{vertical-align: middle;display: inline-block;height: 100%;} */
/* 5 定位方法 如果是一个子元素相对于父元素水平垂直居中 子元素只能用绝对定位*/
/* div{width: 500px;height: 500px;background: #000;margin: 40px;position: relative;} */
/* p{width: 300px;height: 300px;background: firebrick;position: absolute;top: 100px; left: 100px;} */
/* p{width: 300px;height: 300px;background: firebrick;position: absolute;top: 50%;margin-top: -150px; left: 50%;
margin-left: -150px;} */
/* p{width: 300px;height: 300px;background: firebrick;position: absolute;margin: auto; left: 0; top: 0; bottom: 0; right: 0;} */
/* 如果需求是子相对于父元素,方法大体是5大种 */
/* 如果需求是一个元素相对于浏览器窗口水平垂直居中 目前只能用定位
定位用绝对或者固定定位都行,如果需求是相对于窗口水平垂直居中的且不动,那么就只能是固定定位
*/
/* div{width: 500px;height: 500px;background: #000;position: absolute;margin-left: -250px; left: 50%; top: 50%; margin-top: -250px;}
p{width: 300px;height: 300px;background: firebrick;position: absolute;top: 100px; left: 100px;} */
div{width: 500px;height: 500px;background: #000;position: absolute;margin: auto; top: 0; left: 0; right: 0; bottom: 0;}
p{width: 300px;height: 300px;background: firebrick;position: absolute;top: 100px; left: 100px;}
</style>
</head>
<body>
<!-- 实现一个元素水平垂直 -->
<!-- 相对于谁居中? 相对于浏览器窗口 宽高是多少 -->
<!-- 如果是一个子元素相对于父元素水平垂直居中 -->
<div>
<p>子元素</p><span></span>
</div>
</body>
实现一个元素水平垂直居中
最新推荐文章于 2023-08-12 22:49:16 发布