css水平居中（css水平居中的几种方法）

CSS水平居中

简介：

CSS可以实现多种居中方式，其中水平居中也是常用的一种。下面将会详细介绍CSS实现水平居中的方法。

一、文本（inline）元素水平居中

1.1、text-align: center

通过设置父元素的文本对齐方式为居中，即可实现子元素文本的水平居中，如下例：

.parent {

text-align: center;

.child {

display: inline;

1.2、margin: 0 auto

通过设置子元素margin为左右自动，即可实现子元素水平居中，如下例：

.parent {

/*父元素需设置宽度*/

width: 200px;

.child {

display: inline-block;

margin: 0 auto;

二、块(block)元素水平居中

2.1、margin: 0 auto

通过设置子元素margin为左右自动，即可实现子元素水平居中，如下例：

.parent {

/*父元素需设置宽度*/

width: 200px;

.child {

width: 100px;

margin: 0 auto;

2.2、text-align: center

通过设置父元素的文本对齐方式为居中，即可实现子元素水平居中，如下例：

.parent {

text-align: center;

.child {

display: inline-block;

2.3、transform: translateX(-50%)

通过设置相对定位和CSS3中的transform属性，可以将块元素水平居中，如下例：

.parent {

position: relative;

.child {

width: 100px;

position: absolute;

left: 50%;

transform: translateX(-50%);

总结：

以上就是CSS实现水平居中的几种方式，通过灵活运用这些方法，可以更好地实现网站布局和设计的效果，提高用户体验。