在HTML和CSS中,让内容按照期望的方式居中是一个非常重要的问题。CSS提供了许多不同的方法,可以让项目居中显示:水平和垂直居中,文本、图像或者整个元素的居中,都可以完成。下面我们来看看几种实现方式
css p { width: 300px; margin: 0 auto; }
html <div class="container"> <p>I'm vertically centered.</p> </div>
css .container { position: relative; height: 300px; } p { position: absolute; top: 50%; transform: translateY(-50%); }
css p { text-align: center; }
html <div class="container"> <div class="bg"></div> </div>
css .container { position: relative; height: 300px; } .bg { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; background: url(image.jpg) no-repeat; background-position: center center; transform: translate(-50%,-50%); }
粉丝
0
关注
0
收藏
0