css 上左右居中布局

CSS上左右居中布局是网页设计中常用的一种布局方式。通常是通过设置元素的margin和padding属性，以及绝对定位等方式来实现。下面我们来详细了解一下如何实现CSS上左右居中布局。

.center{
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
}

如上所示的代码，我们可以通过设置绝对定位的方式，使元素居于距页面顶部50%的位置，同时也使元素距页面左边50%的距离。但此时元素只是水平和垂直居中，且元素宽度会默认为100%。接下来我们可以再次修改CSS代码来使宽度也能够呈现居中状态。

.center{
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
   width:50%;
}

设置宽度为50%后，元素的宽度就能够自适应内容，并居于页面水平方向的中央。但此时元素距页面左边的距离依然为50%。为了实现元素的上左右居中，我们可以再次修改CSS代码，加入margin属性。

.center{
   position:absolute;
   top:50%;
   left:50%;
   transform:translate(-50%,-50%);
   width:50%;
   margin:0 auto;
}

通过设置margin为0 auto，可以使元素距页面左右两边的距离自适应，且元素仍然呈现居于页面水平方向中央的状态。至此，我们就可以实现CSS上左右居中布局了。