CSS中如何让一个框居中显示?这其实是网页设计中常见的问题。以下是几种实现方式:方法一: box{ margin:0 auto; }这里的“margin:0 auto;”是指将上下margin设为0,
CSS中如何让一个框居中显示?这其实是网页设计中常见的问题。以下是几种实现方式:
方法一: box{ margin:0 auto; }
这里的“margin:0 auto;”是指将上下margin设为0,将左右margin设置为自动。这种方法适用于在父元素中居中显示一个块级元素。
方法二: .box{ position: absolute; top:50%; left:50%; margin-left:-50px; margin-top:-50px; }
这种方式适用于在整个浏览器窗口内,将一个元素水平和垂直居中显示。
方法三: .box{ display:table-cell; text-align:center; vertical-align:middle; width:200px; height:200px; background-color:pink; } .box-holder{ display:table; margin:0 auto; height:400px; }
这种方法适用于将元素在容器居中。在此示例中,通过将.box包装在.box-holder中,而.box-holder自身的display被设置为“table”,并具有一个固定的高度,display打开为“table-cell”的.box就可以水平居中,并基于“vertical-align:middle”也可以垂直居中。
粉丝
0
关注
0
收藏
0