[分享]css中如何让一个框居中显示

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”也可以垂直居中。