css3 居中样式 |css自动优化

居中实现方式如下：
1、水平居中
将要居中的元素的宽度设置为固定宽度，然后将左右 margin 设置为auto。如下示例代码：
.center {
width: 200px;
margin: 0 auto;
}
2、垂直居中
对于单行的文本，可以将行高设置为等于父元素高度，并将 vertical-align 设置为middle。如下示例代码：
.parent {
height: 100px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child {
line-height: 100px;
}
对于多行的文本或图片，可以使用 flex 布局，在父元素上设置 display: flex，并设置 align-items 和 justify-content。如下示例代码：
.parent {
display: flex;
align-items: center;
justify-content: center;
}
.child {
width: 200px;
height: 100px;
}

以上就是 CSS3 中实现居中样式的几种方式。在实际开发中，根据具体的需求选择合适的方式即可，让页面更加美观，用户体验更佳。