1. 居中的实现方法
在网页布局中，经常有将某个元素水平居中的需求，包括文本、图片、盒子等等。而在CSS3中，可以通过几种方式来实现水平居中。
1.1 margin 属性
要让一个块级元素水平居中，可以将其左右外边距都设置为 auto，并指定一个宽度。
.center {
width: 500px;
margin: 0 auto;
}
其中，margin 后的属性值中，0 表示上下外边距为0，auto 表示左右外边距居中。
margin的优点是兼容性好、简单易用，是实现水平居中的最佳选择。
1.2 text-align 属性
对于内联元素（如文字、图片），可以使用 text-align 属性来实现水平居中。
.center {
text-align: center;
}
text-align的优点是简便易用，但需要注意的是，text-align 只适用于内联元素和表格元素。
1.3 绝对定位和负边距
另一种实现方式是将元素的 position 属性设置为 absolute，左右外边距分别设置为 -宽度的一半。
.center {
position: absolute;
left: 50%;
margin-left: -250px;
}
其中，left 为元素左侧离父级元素左侧的距离，由于宽度已知，因此可以算出应设置的 margin-left 值。这种方法同样需要父级元素设置 position 属性为 relative 或 absolute。
绝对定位和负边距的优点是适用范围广，可以对元素进行高度和宽度的任意控制。缺点是需要计算margin-left的值，且当父级元素的宽度发生变化时，可能需要重新计算margin-left的值。
2. 盒子居中的方式
在网页布局中，常常需要对一个盒子进行水平居中，并使其保持垂直方向上的居中。这一需求可以通过以下几种方式来实现。
2.1 绝对定位和transform
将需要居中的盒子设置为绝对定位，并将其 left 和 top 的值都设置为 50%，再利用 transform 属性将盒子平移回左上角，即可实现水平垂直居中。
.container {
position: relative;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
该方式的优点是适用于任意类型的盒子，并且可以处理嵌套居中的情况。
2.2 表格布局
使用 display:table 和 display: table-cell 属性可以快速实现水平垂直居中。
.container {
display: table;
height: 500px;/*设定居中容器的高度*/
width: 100%;/*设定居中容器的宽度*/
}
.box {
display: table-cell;
vertical-align:middle;/*设定内部盒子为垂直居中*/
text-align:center;/*设定内部文本水平居中*/
}
该方式的优点是适用范围广，对于嵌套居中的情况也可以处理。
总结
本文介绍了CSS3实现水平居中的三种方式：margin、text-align、绝对定位和负边距；以及实现盒子水平垂直居中的两种方式：绝对定位和 transform，表格布局。其中，margin 和 table-cell 是两种最常用的方式，适用范围广，简单易用，兼容性好。要根据具体情况选择不同的方式进行实现，以达到最佳效果。